Improve drop down layout when crowded

flathub-infra · Dec 17, 2024 · e3e7b35 · e3e7b35
1 parent c4ef4c9
commit e3e7b35
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 4 deletions.
diff --git a/frontend/pages/admin/app-picks/index.tsx b/frontend/pages/admin/app-picks/index.tsx
@@ -520,7 +520,9 @@ const ComboboxItem = ({
         )}
         {item.numberOfTimesAppOfTheWeek > 0 && (
           <span
-            className={clsx("flex truncate text-sm opacity-70 justify-between")}
+            className={clsx(
+              "flex truncate gap-6 text-sm opacity-70 justify-between",
+            )}
           >
             Last picked
             <strong>
@@ -532,7 +534,9 @@ const ComboboxItem = ({
         )}
         {item.numberOfTimesAppOfTheWeek > 0 && (
           <span
-            className={clsx("flex truncate text-sm opacity-70 justify-between")}
+            className={clsx(
+              "flex truncate gap-6 text-sm opacity-70 justify-between",
+            )}
           >
             Times picked <strong>{item.numberOfTimesAppOfTheWeek}</strong>
           </span>

diff --git a/frontend/src/components/app-picks/AppOfTheDayChanger.tsx b/frontend/src/components/app-picks/AppOfTheDayChanger.tsx
@@ -127,7 +127,9 @@ const ComboboxItem = ({
         )}
         {item.numberOfTimesAppOfTheDay > 0 && (
           <span
-            className={clsx("flex truncate text-sm opacity-70 justify-between")}
+            className={clsx(
+              "flex truncate gap-6 text-sm opacity-70 justify-between",
+            )}
           >
             Last picked
             <strong>
@@ -139,7 +141,9 @@ const ComboboxItem = ({
         )}
         {item.numberOfTimesAppOfTheDay > 0 && (
           <span
-            className={clsx("flex truncate text-sm opacity-70 justify-between")}
+            className={clsx(
+              "flex truncate gap-6 text-sm opacity-70 justify-between",
+            )}
           >
             Times picked <strong>{item.numberOfTimesAppOfTheDay}</strong>
           </span>