From 97b27006cfc9a7c78492a75e276029d23ec4c0e1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nicol=C3=A1s=20Hatcher?= <nicolas@theuniverse.today>
Date: Wed, 1 Jan 2025 17:59:03 +0100
Subject: [PATCH] FIX: Correct size of dropdown fonts

---
 .../NameManagerDialog/NamedRangeActive.tsx    | 20 +++++++++++++++----
 1 file changed, 16 insertions(+), 4 deletions(-)

diff --git a/webapp/src/components/NameManagerDialog/NamedRangeActive.tsx b/webapp/src/components/NameManagerDialog/NamedRangeActive.tsx
index 4ee9a53..0f7a98f 100644
--- a/webapp/src/components/NameManagerDialog/NamedRangeActive.tsx
+++ b/webapp/src/components/NameManagerDialog/NamedRangeActive.tsx
@@ -10,6 +10,7 @@ import {
 import { t } from "i18next";
 import { Check, X } from "lucide-react";
 import { useState } from "react";
+import { theme } from "../../theme";
 
 interface NamedRangeProperties {
   worksheets: WorksheetProperties[];
@@ -59,13 +60,12 @@ function NamedRangeActive(properties: NamedRangeProperties) {
           }}
         >
           <MenuItem value={"[global]"}>
-            {`${t("name_manager_dialog.workbook")} ${t(
-              "name_manager_dialog.global",
-            )}`}
+            <MenuSpan>{t("name_manager_dialog.workbook")}</MenuSpan>
+            <MenuSpanGrey>{` ${t("name_manager_dialog.global")}`}</MenuSpanGrey>
           </MenuItem>
           {worksheets.map((option) => (
             <MenuItem key={option.name} value={option.name}>
-              {option.name}
+              <MenuSpan>{option.name}</MenuSpan>
             </MenuItem>
           ))}
         </StyledTextField>
@@ -104,6 +104,18 @@ function NamedRangeActive(properties: NamedRangeProperties) {
   );
 }
 
+const MenuSpan = styled("span")`
+  font-size: 12px;
+  font-family: "Inter";
+`;
+
+const MenuSpanGrey = styled("span")`
+  white-space: pre;
+  font-size: 12px;
+  font-family: "Inter";
+  color: ${theme.palette.grey[400]};
+`;
+
 const StyledBox = styled(Box)`
   display: flex;
   gap: 12px;