From f777284af2c4b99490c37065bb2a5eec5087671e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C5=ABdolfs=20O=C5=A1i=C5=86=C5=A1?= <rudolfs@osins.org>
Date: Wed, 2 Apr 2025 18:15:23 +0200
Subject: [PATCH] Make all elements of title row same height

This is so that text areas and buttons align perfectly.
---
 src/components/Button.svelte              |  4 +++-
 src/components/CommentToggleInput.svelte  |  2 +-
 src/components/DropdownListItem.svelte    | 11 +++++++----
 src/components/HomeSidebar.svelte         |  2 +-
 src/components/IssueSecondColumn.svelte   | 16 +++++++++-------
 src/components/IssueStateButton.svelte    |  7 +++++--
 src/components/IssuesSecondColumn.svelte  |  2 +-
 src/components/NakedButton.svelte         |  2 +-
 src/components/PatchStateButton.svelte    |  7 +++++--
 src/components/PatchesSecondColumn.svelte |  2 +-
 src/components/RepoTeaser.svelte          |  2 +-
 src/components/Review.svelte              | 12 ++++++------
 src/components/Settings.svelte            |  4 ++--
 src/components/Sidebar.svelte             | 16 ++++++++--------
 src/views/home/Inbox.svelte               |  2 +-
 src/views/home/Repos.svelte               |  4 ++--
 src/views/repo/CreateIssue.svelte         |  6 +++++-
 src/views/repo/Issue.svelte               |  8 ++++----
 src/views/repo/Issues.svelte              |  7 ++++---
 src/views/repo/Patch.svelte               | 21 +++++++++++----------
 src/views/repo/Patches.svelte             |  4 ++--
 21 files changed, 80 insertions(+), 61 deletions(-)

diff --git a/src/components/Button.svelte b/src/components/Button.svelte
index 64e3e0862..9c863fee6 100644
--- a/src/components/Button.svelte
+++ b/src/components/Button.svelte
@@ -10,6 +10,7 @@
     flatLeft?: boolean;
     flatRight?: boolean;
     title?: string;
+    styleHeight?: "2rem" | "2.5rem";
   }
 
   const {
@@ -21,6 +22,7 @@
     flatLeft = false,
     flatRight = false,
     title,
+    styleHeight = "2rem",
   }: Props = $props();
 
   const style = $derived(
@@ -43,7 +45,6 @@
 
     color: var(--text-color);
 
-    height: 2rem;
     column-gap: 0;
     row-gap: 0;
     display: grid;
@@ -371,6 +372,7 @@
 <div
   class="container active"
   style:cursor={!disabled ? "pointer" : "default"}
+  style:height={styleHeight}
   class:disabled
   class:active
   class:flat-right={flatRight}
diff --git a/src/components/CommentToggleInput.svelte b/src/components/CommentToggleInput.svelte
index 48c9c96d9..34c94e466 100644
--- a/src/components/CommentToggleInput.svelte
+++ b/src/components/CommentToggleInput.svelte
@@ -70,7 +70,7 @@
     hoverable
     styleCursor="text"
     variant="float"
-    styleHeight="40px"
+    styleHeight="2.5rem"
     styleWidth="100%"
     onclick={e => {
       e.preventDefault();
diff --git a/src/components/DropdownListItem.svelte b/src/components/DropdownListItem.svelte
index 039a7da1e..8fe6fcb35 100644
--- a/src/components/DropdownListItem.svelte
+++ b/src/components/DropdownListItem.svelte
@@ -7,7 +7,8 @@
     onclick: () => void;
     disabled?: boolean;
     title?: string;
-    style?: string;
+    styleGap?: string;
+    styleMinHeight?: string;
   }
 
   const {
@@ -16,7 +17,8 @@
     selected,
     disabled = false,
     title,
-    style,
+    styleGap,
+    styleMinHeight,
   }: Props = $props();
 </script>
 
@@ -27,7 +29,7 @@
     align-items: center;
     flex-direction: row;
     min-height: 2rem;
-    padding: 0 0.5rem;
+    padding: 0 0.75rem;
     white-space: nowrap;
     font-size: var(--font-size-small);
     font-weight: var(--font-weight-regular);
@@ -65,7 +67,8 @@
   class="item"
   class:selected
   class:disabled
-  {style}
+  style:gap={styleGap}
+  style:min-height={styleMinHeight}
   {title}
   onclick={() => {
     if (disabled) {
diff --git a/src/components/HomeSidebar.svelte b/src/components/HomeSidebar.svelte
index d5025e473..f9028ebf5 100644
--- a/src/components/HomeSidebar.svelte
+++ b/src/components/HomeSidebar.svelte
@@ -57,7 +57,7 @@
 
 <div class="container">
   <div>
-    <div style:margin-bottom="0.5rem">
+    <div style:margin-bottom="1rem">
       {#if activeTab.type === "inbox"}
         <Border
           styleCursor="pointer"
diff --git a/src/components/IssueSecondColumn.svelte b/src/components/IssueSecondColumn.svelte
index d83b81be8..1fdacafa5 100644
--- a/src/components/IssueSecondColumn.svelte
+++ b/src/components/IssueSecondColumn.svelte
@@ -70,10 +70,10 @@
   .container {
     display: flex;
     align-items: center;
-    min-height: 40px;
+    min-height: 2.5rem;
   }
   .issue-list {
-    margin-top: 0.5rem;
+    margin-top: 1rem;
     display: flex;
     flex-direction: column;
     gap: 2px;
@@ -101,7 +101,8 @@
 
 <div class="container">
   <div
-    class="txt-regular txt-semibold global-flex"
+    class="txt-medium global-flex"
+    style:font-weight="var(--font-weight-medium)"
     style:gap="4px"
     style:white-space="nowrap">
     {title}
@@ -119,9 +120,9 @@
 
   <div class="global-flex" style:margin-left="auto">
     <NakedButton
+      styleHeight="2.5rem"
       keyShortcuts="ctrl+f"
       variant="ghost"
-      stylePadding="0 4px"
       active={showFilters}
       onclick={() => {
         if (showFilters) {
@@ -156,9 +157,9 @@
 
 {#if showFilters}
   <div class="global-flex" style:margin="1rem 0">
-    <Popover popoverPositionRight="0" popoverPositionTop="2.5rem">
+    <Popover popoverPositionLeft="0" popoverPositionTop="3rem">
       {#snippet toggle(onclick)}
-        <OutlineButton variant="ghost" {onclick}>
+        <OutlineButton variant="ghost" {onclick} styleHeight="2.5rem">
           {@render icons(status)}
           {capitalize(status)}
           {@render counters(status)}
@@ -171,7 +172,8 @@
           <DropdownList items={["all", "open", "closed"] as IssueStatus[]}>
             {#snippet item(state)}
               <DropdownListItem
-                style="gap: 0.5rem"
+                styleGap="0.5rem"
+                styleMinHeight="2.5rem"
                 selected={status === state}
                 onclick={() => {
                   changeFilter(state);
diff --git a/src/components/IssueStateButton.svelte b/src/components/IssueStateButton.svelte
index 62354226e..77970c33e 100644
--- a/src/components/IssueStateButton.svelte
+++ b/src/components/IssueStateButton.svelte
@@ -49,6 +49,7 @@
 
 <div class="main">
   <Button
+    styleHeight="2.5rem"
     variant="secondary"
     flatRight
     onclick={() => void save($state.snapshot(selectedAction["state"]))}>
@@ -57,10 +58,10 @@
 
   <Popover
     popoverPadding="0"
-    popoverPositionTop="2.5rem"
+    popoverPositionTop="3rem"
     popoverPositionRight="0">
     {#snippet toggle(onclick)}
-      <Button flatLeft {onclick} variant="secondary">
+      <Button styleHeight="2.5rem" flatLeft {onclick} variant="secondary">
         <Icon name="chevron-down" />
       </Button>
     {/snippet}
@@ -70,6 +71,8 @@
           items={actions.filter(a => !isEqual(a.state, issueState))}>
           {#snippet item(action)}
             <DropdownListItem
+              styleGap="0.5rem"
+              styleMinHeight="2.5rem"
               selected={isEqual(selectedAction, action)}
               onclick={() => {
                 selectedAction = action;
diff --git a/src/components/IssuesSecondColumn.svelte b/src/components/IssuesSecondColumn.svelte
index 5b9072aaa..a76bf63d5 100644
--- a/src/components/IssuesSecondColumn.svelte
+++ b/src/components/IssuesSecondColumn.svelte
@@ -58,7 +58,7 @@
 
 <div class="container">
   <div>
-    <div style:margin-bottom="0.5rem" style:padding-left="0.75rem">
+    <div style:margin-bottom="1rem" style:padding-left="0.75rem">
       <RepoTeaser name={project.data.name} seeding={repo.seeding} />
     </div>
 
diff --git a/src/components/NakedButton.svelte b/src/components/NakedButton.svelte
index 4dc73438a..75da0a0e9 100644
--- a/src/components/NakedButton.svelte
+++ b/src/components/NakedButton.svelte
@@ -7,7 +7,7 @@
     disabled?: boolean;
     variant: "primary" | "secondary" | "ghost";
     onclick?: (e: MouseEvent) => void;
-    styleHeight?: string;
+    styleHeight?: "2rem" | "2.5rem";
     stylePadding?: string;
     active?: boolean;
     keyShortcuts?: string;
diff --git a/src/components/PatchStateButton.svelte b/src/components/PatchStateButton.svelte
index 91b64f1bb..2b5126f37 100644
--- a/src/components/PatchStateButton.svelte
+++ b/src/components/PatchStateButton.svelte
@@ -49,6 +49,7 @@
 
 <div class="main">
   <Button
+    styleHeight="2.5rem"
     variant="secondary"
     flatRight
     onclick={() =>
@@ -58,10 +59,10 @@
 
   <Popover
     popoverPadding="0"
-    popoverPositionTop="2.5rem"
+    popoverPositionTop="3rem"
     popoverPositionRight="0">
     {#snippet toggle(onclick)}
-      <Button flatLeft {onclick} variant="secondary">
+      <Button styleHeight="2.5rem" flatLeft {onclick} variant="secondary">
         <Icon name="chevron-down" />
       </Button>
     {/snippet}
@@ -71,6 +72,8 @@
           items={actions.filter(a => !isEqual(a.state, patchState))}>
           {#snippet item(action)}
             <DropdownListItem
+              styleGap="0.5rem"
+              styleMinHeight="2.5rem"
               selected={isEqual(selectedAction, action)}
               onclick={() => {
                 selectedAction = action;
diff --git a/src/components/PatchesSecondColumn.svelte b/src/components/PatchesSecondColumn.svelte
index 303b220fd..56910aa91 100644
--- a/src/components/PatchesSecondColumn.svelte
+++ b/src/components/PatchesSecondColumn.svelte
@@ -63,7 +63,7 @@
 
 <div class="container">
   <div>
-    <div style:margin-bottom="0.5rem" style:padding-left="0.75rem">
+    <div style:margin-bottom="1rem" style:padding-left="0.75rem">
       <RepoTeaser name={project.data.name} seeding={repo.seeding} />
     </div>
 
diff --git a/src/components/RepoTeaser.svelte b/src/components/RepoTeaser.svelte
index 0d7043d50..d25b584d6 100644
--- a/src/components/RepoTeaser.svelte
+++ b/src/components/RepoTeaser.svelte
@@ -12,7 +12,7 @@
 <style>
   .teaser {
     align-items: center;
-    min-height: 40px;
+    min-height: 2.5rem;
   }
 
   .seeding {
diff --git a/src/components/Review.svelte b/src/components/Review.svelte
index 7a6562c41..185539427 100644
--- a/src/components/Review.svelte
+++ b/src/components/Review.svelte
@@ -253,9 +253,9 @@
     display: flex;
     align-items: center;
     white-space: nowrap;
-    min-height: 40px;
-    gap: 0.5rem;
-    margin-bottom: 0.5rem;
+    min-height: 2.5rem;
+    gap: 0.75rem;
+    margin-bottom: 1rem;
   }
   .metadata-divider {
     width: 2px;
@@ -297,12 +297,12 @@
 </style>
 
 <div class="content">
-  <div style:margin-bottom="0.5rem">
+  <div style:margin-bottom="1rem">
     <div class="title">
       <NakedButton
+        styleHeight="2.5rem"
         variant="ghost"
-        onclick={onNavigateBack}
-        stylePadding="0 4px">
+        onclick={onNavigateBack}>
         <Icon name="arrow-left" />
       </NakedButton>
       <span class="global-flex" style:gap="0">
diff --git a/src/components/Settings.svelte b/src/components/Settings.svelte
index 4a0a07c53..6edc88a97 100644
--- a/src/components/Settings.svelte
+++ b/src/components/Settings.svelte
@@ -10,13 +10,13 @@
 
   interface Props {
     compact?: boolean;
-    styleHeight?: string;
+    styleHeight?: ComponentProps<typeof NakedButton>["styleHeight"];
     popoverProps: Partial<ComponentProps<typeof Popover>>;
   }
 
   const {
     compact = true,
-    styleHeight = "40px",
+    styleHeight = "2.5rem",
     popoverProps,
   }: Props = $props();
 </script>
diff --git a/src/components/Sidebar.svelte b/src/components/Sidebar.svelte
index c8bc87b1b..79f193ea9 100644
--- a/src/components/Sidebar.svelte
+++ b/src/components/Sidebar.svelte
@@ -21,8 +21,8 @@
     cursor: pointer;
     border: 0;
     background: none;
-    height: 40px;
-    width: 40px;
+    height: 2.5rem;
+    width: 2.5rem;
     clip-path: var(--2px-corner-fill);
     margin: 0;
     display: flex;
@@ -38,7 +38,7 @@
 </style>
 
 <div class="global-flex" style:flex-direction="column" style:gap="0.5rem">
-  <div class="global-flex" style:height="40px">
+  <div class="global-flex" style:height="2.5rem">
     <Icon name="repo" />
   </div>
   {#if activeTab === "issues"}
@@ -52,8 +52,8 @@
         });
       }}
       variant="ghost"
-      styleWidth="40px"
-      styleHeight="40px"
+      styleWidth="2.5rem"
+      styleHeight="2.5rem"
       styleJustifyContent="center">
       <Icon name="issue" />
     </Border>
@@ -82,8 +82,8 @@
         });
       }}
       variant="ghost"
-      styleWidth="40px"
-      styleHeight="40px"
+      styleWidth="2.5rem"
+      styleHeight="2.5rem"
       styleJustifyContent="center">
       <Icon name="patch" />
     </Border>
@@ -104,7 +104,7 @@
 
 <div>
   <NakedButton
-    styleHeight="40px"
+    styleHeight="2.5rem"
     variant="ghost"
     onclick={() => {
       if (getLayout()) {
diff --git a/src/views/home/Inbox.svelte b/src/views/home/Inbox.svelte
index 2a164d3b4..f3d8a896d 100644
--- a/src/views/home/Inbox.svelte
+++ b/src/views/home/Inbox.svelte
@@ -158,7 +158,7 @@
     justify-content: space-between;
     padding-right: 1.5rem;
     align-items: center;
-    min-height: 40px;
+    min-height: 2.5rem;
   }
 </style>
 
diff --git a/src/views/home/Repos.svelte b/src/views/home/Repos.svelte
index 8ebe53182..be8c10eac 100644
--- a/src/views/home/Repos.svelte
+++ b/src/views/home/Repos.svelte
@@ -102,7 +102,7 @@
     justify-content: space-between;
     padding-right: 1.5rem;
     align-items: center;
-    min-height: 40px;
+    min-height: 2.5rem;
   }
 </style>
 
@@ -120,7 +120,7 @@
       {notificationCount} />
   {/snippet}
   <div class="container">
-    <div class="global-flex" style:margin-bottom="0.5rem">
+    <div class="global-flex" style:margin-bottom="1rem">
       <div class="header">Repositories</div>
       {#if repos.length > 0}
         <div class="global-flex" style:margin-left="auto">
diff --git a/src/views/repo/CreateIssue.svelte b/src/views/repo/CreateIssue.svelte
index 98a76f1a2..fc2ea23e7 100644
--- a/src/views/repo/CreateIssue.svelte
+++ b/src/views/repo/CreateIssue.svelte
@@ -85,7 +85,11 @@
     font-weight: var(--font-weight-medium);
     -webkit-user-select: text;
     user-select: text;
-    margin-top: 0.35rem;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    word-break: break-word;
+    min-height: 2.5rem;
     margin-bottom: 1rem;
   }
   .content {
diff --git a/src/views/repo/Issue.svelte b/src/views/repo/Issue.svelte
index 28776e0b0..e153280a1 100644
--- a/src/views/repo/Issue.svelte
+++ b/src/views/repo/Issue.svelte
@@ -292,13 +292,13 @@
     align-items: center;
     justify-content: space-between;
     word-break: break-word;
-    min-height: 40px;
+    min-height: 2.5rem;
   }
   .status {
     padding: 0;
     margin-right: 0.75rem;
-    height: 2rem;
-    width: 2rem;
+    height: 2.5rem;
+    width: 2.5rem;
   }
   .issue-body {
     margin: 1rem 0;
@@ -368,7 +368,7 @@
   {/snippet}
 
   <div class="content">
-    <div style:margin-bottom="0.5rem">
+    <div style:margin-bottom="1rem">
       {#if editingTitle}
         <div class="title">
           <div
diff --git a/src/views/repo/Issues.svelte b/src/views/repo/Issues.svelte
index 823e3fd8b..cc82ac708 100644
--- a/src/views/repo/Issues.svelte
+++ b/src/views/repo/Issues.svelte
@@ -72,8 +72,8 @@
     font-size: var(--font-size-medium);
     display: flex;
     align-items: center;
-    min-height: 40px;
-    margin-bottom: 0.5rem;
+    min-height: 2.5rem;
+    margin-bottom: 1rem;
   }
 </style>
 
@@ -96,7 +96,7 @@
   <div class="container">
     <div class="header">
       <div>Issues</div>
-      <div class="global-flex" style:margin-left="auto">
+      <div class="global-flex" style:margin-left="auto" style:gap="0.75rem">
         {#if issues.length > 0}
           <TextInput
             onSubmit={async () => {
@@ -126,6 +126,7 @@
         {/if}
         <div class="txt-regular txt-semibold">
           <Button
+            styleHeight="2.5rem"
             variant="secondary"
             onclick={() => {
               void router.push({
diff --git a/src/views/repo/Patch.svelte b/src/views/repo/Patch.svelte
index ed74bb444..6a620c8b8 100644
--- a/src/views/repo/Patch.svelte
+++ b/src/views/repo/Patch.svelte
@@ -311,7 +311,7 @@
     align-items: center;
     justify-content: space-between;
     word-break: break-word;
-    min-height: 40px;
+    min-height: 2.5rem;
   }
   .title-icons {
     display: flex;
@@ -322,11 +322,11 @@
   .status {
     padding: 0;
     margin-right: 0.75rem;
-    height: 2rem;
-    width: 2rem;
+    height: 2.5rem;
+    width: 2.5rem;
   }
   .patch-list {
-    margin-top: 0.5rem;
+    margin-top: 1rem;
     display: flex;
     flex-direction: column;
     gap: 2px;
@@ -389,7 +389,7 @@
   {/snippet}
 
   {#snippet secondColumn()}
-    <div class="txt-regular txt-semibold global-flex" style:min-height="40px">
+    <div class="txt-regular txt-semibold global-flex" style:min-height="2.5rem">
       <div class="global-flex" style:gap="4px">
         {project.data.name}
         <Icon name="chevron-right" />
@@ -405,9 +405,9 @@
       </div>
       <div style:margin-left="auto">
         <NakedButton
+          styleHeight="2.5rem"
           keyShortcuts="ctrl+f"
           variant="ghost"
-          stylePadding="0 4px"
           active={showFilters}
           onclick={() => {
             if (showFilters) {
@@ -423,9 +423,9 @@
     </div>
     {#if showFilters}
       <div class="global-flex" style:margin="1rem 0">
-        <Popover popoverPositionLeft="0" popoverPositionTop="2.5rem">
+        <Popover popoverPositionLeft="0" popoverPositionTop="3rem">
           {#snippet toggle(onclick)}
-            <OutlineButton variant="ghost" {onclick}>
+            <OutlineButton variant="ghost" {onclick} styleHeight="2.5rem">
               {@render icons(status)}
               {status ? capitalize(status) : "All"}
               {@render counters(status)}
@@ -445,7 +445,8 @@
                 ] as const}>
                 {#snippet item(state)}
                   <DropdownListItem
-                    style="gap: 0.5rem"
+                    styleGap="0.5rem"
+                    styleMinHeight="2.5rem"
                     selected={status === state}
                     onclick={async () => {
                       await loadPatches(state);
@@ -553,7 +554,7 @@
       }} />
   {:else}
     <div class="content">
-      <div style:margin-bottom="0.5rem">
+      <div style:margin-bottom="1rem">
         {#if editingTitle}
           <div class="title">
             <div
diff --git a/src/views/repo/Patches.svelte b/src/views/repo/Patches.svelte
index ed58d8570..8c02af81d 100644
--- a/src/views/repo/Patches.svelte
+++ b/src/views/repo/Patches.svelte
@@ -104,8 +104,8 @@
     font-size: var(--font-size-medium);
     display: flex;
     align-items: center;
-    min-height: 40px;
-    margin-bottom: 0.5rem;
+    min-height: 2.5rem;
+    margin-bottom: 1rem;
   }
 </style>