From 336fc6726da0fdf9efd64965a7b14d6dfbeffda3 Mon Sep 17 00:00:00 2001
From: "Tom (plebeius.eth)" <tom@plebbit.com>
Date: Thu, 16 Jan 2025 16:56:56 +0100
Subject: [PATCH] fix(label): remove left padding for first visible label in
 array

---
 .../post/comment-tools/comment-tools.tsx      | 24 ++++++++++++-------
 src/components/post/label/label.module.css    |  4 ++++
 src/components/post/label/label.tsx           |  5 ++--
 3 files changed, 23 insertions(+), 10 deletions(-)

diff --git a/src/components/post/comment-tools/comment-tools.tsx b/src/components/post/comment-tools/comment-tools.tsx
index 097ad922..00460168 100644
--- a/src/components/post/comment-tools/comment-tools.tsx
+++ b/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} />
+      ))}
     </>
   );
 };
diff --git a/src/components/post/label/label.module.css b/src/components/post/label/label.module.css
index b86a82c3..6647f6fa 100644
--- a/src/components/post/label/label.module.css
+++ b/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;
diff --git a/src/components/post/label/label.tsx b/src/components/post/label/label.tsx
index 8738193c..1c907a87 100644
--- a/src/components/post/label/label.tsx
+++ b/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>
   );