From c1805c1ff33a170e4a9c99133d89301702132eba Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?nicole=20miko=C5=82ajczyk?= <git@mkljczk.pl>
Date: Sun, 19 Oct 2025 21:14:41 +0200
Subject: [PATCH] pl-fe: styles
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: nicole mikołajczyk <git@mkljczk.pl>
---
 packages/pl-fe/src/components/status.tsx                    | 4 ++++
 packages/pl-fe/src/components/statuses/status-info.tsx      | 6 ++++--
 .../src/features/status/components/detailed-status.tsx      | 1 +
 3 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/packages/pl-fe/src/components/status.tsx b/packages/pl-fe/src/components/status.tsx
index 0cafb59f0..577a8c5e3 100644
--- a/packages/pl-fe/src/components/status.tsx
+++ b/packages/pl-fe/src/components/status.tsx
@@ -203,6 +203,7 @@ const Status: React.FC<IStatus> = (props) => {
     if (isReblog && showGroup && group) {
       return (
         <StatusInfo
+          className='-mb-1'
           avatarSize={avatarSize}
           icon={<Icon src={require('@phosphor-icons/core/regular/repeat.svg')} className='size-4 text-green-600' />}
           text={
@@ -264,6 +265,7 @@ const Status: React.FC<IStatus> = (props) => {
 
       return (
         <StatusInfo
+          className='-mb-1'
           avatarSize={avatarSize}
           icon={<Icon src={require('@phosphor-icons/core/regular/repeat.svg')} className='size-4 text-green-600' />}
           text={
@@ -286,6 +288,7 @@ const Status: React.FC<IStatus> = (props) => {
     } else if (featured) {
       return (
         <StatusInfo
+          className='-mb-1'
           avatarSize={avatarSize}
           icon={<Icon src={require('@phosphor-icons/core/regular/push-pin.svg')} className='size-4 text-gray-600 dark:text-gray-400' />}
           text={
@@ -296,6 +299,7 @@ const Status: React.FC<IStatus> = (props) => {
     } else if (showGroup && group) {
       return (
         <StatusInfo
+          className='-mb-1'
           avatarSize={avatarSize}
           icon={<Icon src={require('@phosphor-icons/core/regular/users-three.svg')} className='size-4 text-primary-600 dark:text-accent-blue' />}
           text={
diff --git a/packages/pl-fe/src/components/statuses/status-info.tsx b/packages/pl-fe/src/components/statuses/status-info.tsx
index 3594722d5..02ae5f425 100644
--- a/packages/pl-fe/src/components/statuses/status-info.tsx
+++ b/packages/pl-fe/src/components/statuses/status-info.tsx
@@ -1,3 +1,4 @@
+import clsx from 'clsx';
 import React from 'react';
 
 import HStack from 'pl-fe/components/ui/hstack';
@@ -7,11 +8,12 @@ interface IStatusInfo {
   avatarSize: number;
   icon: React.ReactNode;
   text: React.ReactNode;
+  className?: string;
   title?: string;
 }
 
 const StatusInfo = (props: IStatusInfo) => {
-  const { avatarSize, icon, text, title } = props;
+  const { avatarSize, icon, text, className, title } = props;
 
   const onClick = (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
     event.stopPropagation();
@@ -21,7 +23,7 @@ const StatusInfo = (props: IStatusInfo) => {
     <HStack
       space={2}
       alignItems='center'
-      className='-mb-1 w-fit max-w-full cursor-default rounded-full border border-gray-200 bg-gray-100 px-3 py-1 black:border-gray-800 black:bg-gray-900 dark:border-transparent dark:bg-primary-800 rtl:space-x-reverse'
+      className={clsx('w-fit max-w-full cursor-default rounded-full border border-gray-200 bg-gray-100 px-3 py-1 black:border-gray-800 black:bg-gray-900 dark:border-transparent dark:bg-primary-800 rtl:space-x-reverse', className)}
       onClick={onClick}
       style={{ marginLeft: avatarSize - 25, maxWidth: `calc(100% - ${avatarSize - 25}px)` }}
       title={title}
diff --git a/packages/pl-fe/src/features/status/components/detailed-status.tsx b/packages/pl-fe/src/features/status/components/detailed-status.tsx
index f46375a72..d2630bf64 100644
--- a/packages/pl-fe/src/features/status/components/detailed-status.tsx
+++ b/packages/pl-fe/src/features/status/components/detailed-status.tsx
@@ -45,6 +45,7 @@ const DetailedStatus: React.FC<IDetailedStatus> = ({
       return (
         <div className='mb-4'>
           <StatusInfo
+            className='-mb-1'
             avatarSize={42}
             icon={
               <Icon