fix(label): remove left padding for first visible label in array

src/components/post/comment-tools/comment-tools.tsx

@@ -222,16 +222,24 @@ const CommentToolsLabel = ({ cid, deleted, failed, editState, isReply, nsfw, rem
   const failedEdit = editState === 'failed';
   const pendingEdit = editState === 'pending';
 
+  const labels = [
+    { show: nsfw, color: 'nsfw-red', text: t('nsfw') },
+    { show: spoiler, color: 'black', text: t('spoiler') },
+    { show: pending, color: 'yellow', text: t('pending') },
+    { show: failed, color: 'red', text: t('failed') },
+    { show: deleted, color: 'red', text: t('deleted') },
+    { show: removed, color: 'red', text: t('removed') },
+    { show: failedEdit, color: 'red', text: t('failed_edit') },
+    { show: pendingEdit, color: 'yellow', text: t('pending_edit') },
+  ];
+
+  const visibleLabels = labels.filter((label) => label.show);
+
   return (
     <>
-      {nsfw && <Label color='nsfw-red' text={t('nsfw')} />}
-      {spoiler && <Label color='black' text={t('spoiler')} />}
-      {pending && <Label color='yellow' text={t('pending')} />}
-      {failed && <Label color='red' text={t('failed')} />}
-      {deleted && <Label color='red' text={t('deleted')} />}
-      {removed && <Label color='red' text={t('removed')} />}
-      {failedEdit && <Label color='red' text={t('failed_edit')} />}
-      {pendingEdit && <Label color='yellow' text={t('pending_edit')} />}
+      {visibleLabels.map((label, index) => (
+        <Label key={label.text} color={label.color} text={label.text} isFirstInLine={index === 0} />
+      ))}
     </>
   );
 };

src/components/post/label/label.module.css

@@ -12,6 +12,10 @@
   padding: 0 5px;
 }
 
+.firstInLine {
+  padding-left: 0 !important;
+}
+
 .black {
   color: var(--text);
   border-color: currentColor;

src/components/post/label/label.tsx

@@ -4,13 +4,14 @@ import styles from './label.module.css';
 interface LabelProps {
   color: string;
   text: string;
+  isFirstInLine?: boolean;
 }
 
-const Label = ({ color, text }: LabelProps) => {
+const Label = ({ color, text, isFirstInLine = false }: LabelProps) => {
   const { t } = useTranslation();
 
   return (
-    <span className={styles.label}>
+    <span className={`${styles.label} ${isFirstInLine ? styles.firstInLine : ''}`}>
       <span className={`${styles.stamp} ${styles[color]}`}>{t(text)}</span>
     </span>
   );