From dc57a187a3a0c120b6a064c27dbf9cef780714df Mon Sep 17 00:00:00 2001
From: Sebastian Martinez <me@sebastinez.dev>
Date: Sat, 14 Dec 2024 08:52:44 +0100
Subject: [PATCH] Fix regression on height of CreateIssue description field

Also instead of calculating the height of the description textarea we
should allow flexbox to extend the description field to fill the entire
height.
---
 public/index.css                       |  6 ------
 src/components/Border.svelte           |  5 ++++-
 src/components/ExtendedTextarea.svelte | 30 +++++++++++---------------
 src/components/Textarea.svelte         |  5 ++++-
 src/views/repo/CreateIssue.svelte      |  6 ++++--
 5 files changed, 25 insertions(+), 27 deletions(-)

diff --git a/public/index.css b/public/index.css
index bb54300..43dce1c 100644
--- a/public/index.css
+++ b/public/index.css
@@ -64,12 +64,6 @@ body {
   font-weight: var(--font-weight-regular);
 }
 
-@media (max-width: 1600px) {
-  .global-hide-on-small-desktop-down {
-    display: none !important;
-  }
-}
-
 :root {
   --elevation-low: 0 0 48px 0 #000000ee;
 }
diff --git a/src/components/Border.svelte b/src/components/Border.svelte
index a52c934..c1b6c58 100644
--- a/src/components/Border.svelte
+++ b/src/components/Border.svelte
@@ -17,6 +17,7 @@
     flatTop?: boolean;
     styleBackgroundColor?: string;
     styleFlexDirection?: string;
+    styleAlignItems?: string;
     styleJustifyContent?: string;
   }
 
@@ -36,6 +37,7 @@
     flatTop = false,
     styleBackgroundColor = "var(--color-background-default)",
     styleFlexDirection = "row",
+    styleAlignItems = "center",
     styleJustifyContent,
   }: Props = $props();
 
@@ -54,6 +56,7 @@
     -webkit-user-select: none;
     user-select: none;
 
+    flex: 1;
     column-gap: 0;
     row-gap: 0;
     display: grid;
@@ -128,7 +131,6 @@
   .p3-3 {
     grid-area: p3-3;
     display: flex;
-    align-items: center;
     background-color: var(--local-background-color);
   }
   .p3-4 {
@@ -229,6 +231,7 @@
     style:gap={styleGap}
     style:overflow={styleOverflow}
     style:justify-content={styleJustifyContent}
+    style:align-items={styleAlignItems}
     style:flex-direction={styleFlexDirection}>
     {@render children()}
   </div>
diff --git a/src/components/ExtendedTextarea.svelte b/src/components/ExtendedTextarea.svelte
index 77b3a6a..57b3add 100644
--- a/src/components/ExtendedTextarea.svelte
+++ b/src/components/ExtendedTextarea.svelte
@@ -17,6 +17,7 @@
   import OutlineButton from "./OutlineButton.svelte";
 
   interface Props {
+    textAreaSize?: "grow" | "resizable" | "fixed-height";
     styleMinHeight?: string;
     rid: string;
     placeholder?: string;
@@ -41,6 +42,7 @@
 
   /* eslint-disable prefer-const */
   let {
+    textAreaSize,
     preview = $bindable(false),
     styleMinHeight,
     rid,
@@ -196,6 +198,7 @@
     align-items: flex-start;
     gap: 1rem;
     width: 100%;
+    flex: 1;
   }
   .inline {
     border: 0;
@@ -239,6 +242,8 @@
     </div>
   {:else}
     <Textarea
+      size={textAreaSize}
+      styleAlignItems="flex-start"
       {draggingOver}
       {borderVariant}
       {stylePadding}
@@ -269,27 +274,20 @@
           <Icon name="markdown" />
           Markdown is supported.
         </div>
-        <span class="global-hide-on-small-desktop-down">
-          <br />
-        </span>
-        <span class="global-hide-on-small-desktop-down">
-          Press {utils.modifierKey()}↵ to submit.
-        </span>
+        Press {utils.modifierKey()}↵ to submit.
       </div>
     {/if}
     <div class="buttons">
       <OutlineButton variant="ghost" onclick={selectFiles} disabled={preview}>
         <Icon name="attachment" />
-        <span class="global-hide-on-small-desktop-down">Attach</span>
+        Attach
       </OutlineButton>
       <OutlineButton
         variant="ghost"
         disabled={body.trim() === ""}
         onclick={() => (preview = !preview)}>
         <Icon name={preview ? "pen" : "eye"} />
-        <span class="global-hide-on-small-desktop-down">
-          {preview ? "Edit" : "Preview"}
-        </span>
+        {preview ? "Edit" : "Preview"}
       </OutlineButton>
       <Button
         variant="ghost"
@@ -299,13 +297,11 @@
           (disallowEmptyBody && body.trim() === "")}
         onclick={submitFn}>
         <Icon name="checkmark" />
-        <span class="global-hide-on-small-desktop-down">
-          {#if submitInProgress}
-            Saving…
-          {:else}
-            {submitCaption}
-          {/if}
-        </span>
+        {#if submitInProgress}
+          Saving…
+        {:else}
+          {submitCaption}
+        {/if}
       </Button>
     </div>
   </div>
diff --git a/src/components/Textarea.svelte b/src/components/Textarea.svelte
index 29e9f1b..e84f680 100644
--- a/src/components/Textarea.svelte
+++ b/src/components/Textarea.svelte
@@ -21,6 +21,7 @@
     selectionStart?: number;
     size?: "grow" | "resizable" | "fixed-height";
     styleMinHeight?: string;
+    styleAlignItems?: string;
     stylePadding?: string;
     submit: () => Promise<void>;
     value?: string;
@@ -39,6 +40,7 @@
     selectionEnd = $bindable(0),
     selectionStart = $bindable(0),
     size = "grow",
+    styleAlignItems = undefined,
     styleMinHeight = undefined,
     stylePadding = "0.75rem",
     submit,
@@ -121,7 +123,7 @@
     border: 0;
     color: var(--color-foreground-default);
     font-family: inherit;
-    height: 5rem;
+    height: 100%;
     width: 100%;
     min-height: 6.375rem;
     resize: none;
@@ -161,6 +163,7 @@
   variant={focussed ? "secondary" : borderVariant}
   stylePosition="relative"
   styleWidth="100%"
+  {styleAlignItems}
   {styleMinHeight}>
   <textarea
     style:min-height={styleMinHeight}
diff --git a/src/views/repo/CreateIssue.svelte b/src/views/repo/CreateIssue.svelte
index e6338b9..7bd60bf 100644
--- a/src/views/repo/CreateIssue.svelte
+++ b/src/views/repo/CreateIssue.svelte
@@ -67,8 +67,10 @@
     margin-bottom: 1rem;
   }
   .content {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
     padding: 0 1rem 1rem 1rem;
-    height: calc(100% - 14rem);
   }
   .metadata-divider {
     width: 2px;
@@ -134,6 +136,7 @@
     </div>
 
     <ExtendedTextarea
+      textAreaSize="fixed-height"
       disableSubmit={title.trim() === ""}
       disallowEmptyBody
       submitCaption="Save"
@@ -154,7 +157,6 @@
           console.error("Not able to create issue.");
         }
       }}
-      styleMinHeight="100%"
       rid={repo.rid}
       bind:preview
       borderVariant="ghost"