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 14, 2024 · f216518 · f216518
1 parent 5f26f71
commit f216518
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 26 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,
@@ -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"