From 5e513e6f49453672077c5bc2f02ad9f629bca284 Mon Sep 17 00:00:00 2001
From: Egor <egor@philippov.ca>
Date: Fri, 5 Sep 2025 18:33:25 -0700
Subject: [PATCH] better titlebar spacing and height

---
 package.json                |  2 +-
 src/components/TitleBar.tsx | 29 +++++++++++++++--------------
 2 files changed, 16 insertions(+), 15 deletions(-)

diff --git a/package.json b/package.json
index 570b955..4c4a6b5 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "gerbil",
   "productName": "Gerbil",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "Run Large Language Models locally",
   "main": "out/main/index.js",
   "homepage": "./",
diff --git a/src/components/TitleBar.tsx b/src/components/TitleBar.tsx
index 1167715..1655ec9 100644
--- a/src/components/TitleBar.tsx
+++ b/src/components/TitleBar.tsx
@@ -95,7 +95,7 @@ export const TitleBar = ({
       <Box
         style={{
           height: TITLEBAR_HEIGHT,
-          padding: '0.125rem 0.5rem',
+          padding: '0.125rem 0 0.125rem 0.5rem',
           display: 'flex',
           alignItems: 'center',
           justifyContent: 'space-between',
@@ -117,11 +117,9 @@ export const TitleBar = ({
           <Image
             src={iconUrl}
             alt={PRODUCT_NAME}
-            w={24}
-            h={24}
+            w={26}
+            h={26}
             style={{
-              minWidth: 24,
-              minHeight: 24,
               cursor: 'pointer',
               userSelect: 'none',
               transition: 'transform 0.15s ease-in-out',
@@ -201,17 +199,18 @@ export const TitleBar = ({
           )}
         </Box>
 
-        <Group gap="0.125rem" style={{ WebkitAppRegion: 'no-drag' }}>
+        <Group gap="0" style={{ WebkitAppRegion: 'no-drag' }}>
           {hasUpdate && (
             <ActionIcon
               variant="subtle"
               color="orange"
-              size="2rem"
+              size={TITLEBAR_HEIGHT}
               onClick={openReleasePage}
               aria-label="New release available"
+              tabIndex={-1}
               style={{
-                borderRadius: '0.25rem',
-                margin: '0.125rem',
+                borderRadius: 0,
+                margin: 0,
               }}
             >
               <CircleFadingArrowUp size="1.25rem" />
@@ -220,12 +219,13 @@ export const TitleBar = ({
 
           <ActionIcon
             variant="subtle"
-            size="2rem"
+            size={TITLEBAR_HEIGHT}
             onClick={onOpenSettings}
             aria-label="Open settings"
+            tabIndex={-1}
             style={{
               borderRadius: '0.25rem',
-              margin: '0.125rem',
+              margin: 0,
             }}
           >
             <Settings size="1.25rem" />
@@ -263,13 +263,14 @@ export const TitleBar = ({
             <ActionIcon
               key={index}
               variant="subtle"
-              size="2rem"
+              size={TITLEBAR_HEIGHT}
               onClick={button.onClick}
               color={button.color}
               aria-label={button.label}
+              tabIndex={-1}
               style={{
-                borderRadius: '0.25rem',
-                margin: '0.125rem',
+                borderRadius: 0,
+                margin: 0,
               }}
             >
               {button.icon}