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.
radicle-dev · Dec 16, 2024 · dc57a18 · dc57a18
1 parent 8171b11
commit dc57a18
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 27 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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"