Skip to content

Commit

Permalink
Fix regression on height of CreateIssue description field
Browse files Browse the repository at this point in the history
Also instead of calculating the height of the description textarea we
should allow flexbox to extend the description field to fill the entire
height.
  • Loading branch information
sebastinez authored and rudolfs committed Dec 17, 2024
1 parent a71f6b7 commit d6d9c43
Show file tree
Hide file tree
Showing 5 changed files with 25 additions and 27 deletions.
6 changes: 0 additions & 6 deletions public/index.css
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down
5 changes: 4 additions & 1 deletion src/components/Border.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@
flatTop?: boolean;
styleBackgroundColor?: string;
styleFlexDirection?: string;
styleAlignItems?: string;
styleJustifyContent?: string;
}
Expand All @@ -36,6 +37,7 @@
flatTop = false,
styleBackgroundColor = "var(--color-background-default)",
styleFlexDirection = "row",
styleAlignItems = "center",
styleJustifyContent,
}: Props = $props();
Expand All @@ -54,6 +56,7 @@
-webkit-user-select: none;
user-select: none;
flex: 1;
column-gap: 0;
row-gap: 0;
display: grid;
Expand Down Expand Up @@ -128,7 +131,6 @@
.p3-3 {
grid-area: p3-3;
display: flex;
align-items: center;
background-color: var(--local-background-color);
}
.p3-4 {
Expand Down Expand Up @@ -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>
Expand Down
30 changes: 13 additions & 17 deletions src/components/ExtendedTextarea.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@
import OutlineButton from "./OutlineButton.svelte";
interface Props {
textAreaSize?: ComponentProps<typeof Textarea>["size"];
styleMinHeight?: string;
rid: string;
placeholder?: string;
Expand All @@ -41,6 +42,7 @@
/* eslint-disable prefer-const */
let {
textAreaSize,
preview = $bindable(false),
styleMinHeight,
rid,
Expand Down Expand Up @@ -196,6 +198,7 @@
align-items: flex-start;
gap: 1rem;
width: 100%;
flex: 1;
}
.inline {
border: 0;
Expand Down Expand Up @@ -239,6 +242,8 @@
</div>
{:else}
<Textarea
size={textAreaSize}
styleAlignItems="flex-start"
{draggingOver}
{borderVariant}
{stylePadding}
Expand Down Expand Up @@ -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"
Expand All @@ -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>
Expand Down
5 changes: 4 additions & 1 deletion src/components/Textarea.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@
selectionStart?: number;
size?: "grow" | "resizable" | "fixed-height";
styleMinHeight?: string;
styleAlignItems?: string;
stylePadding?: string;
submit: () => Promise<void>;
value?: string;
Expand All @@ -39,6 +40,7 @@
selectionEnd = $bindable(0),
selectionStart = $bindable(0),
size = "grow",
styleAlignItems = undefined,
styleMinHeight = undefined,
stylePadding = "0.75rem",
submit,
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -161,6 +163,7 @@
variant={focussed ? "secondary" : borderVariant}
stylePosition="relative"
styleWidth="100%"
{styleAlignItems}
{styleMinHeight}>
<textarea
style:min-height={styleMinHeight}
Expand Down
6 changes: 4 additions & 2 deletions src/views/repo/CreateIssue.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -134,6 +136,7 @@
</div>

<ExtendedTextarea
textAreaSize="fixed-height"
disableSubmit={title.trim() === ""}
disallowEmptyBody
submitCaption="Save"
Expand All @@ -154,7 +157,6 @@
console.error("Not able to create issue.");
}
}}
styleMinHeight="100%"
rid={repo.rid}
bind:preview
borderVariant="ghost"
Expand Down

0 comments on commit d6d9c43

Please sign in to comment.