fix: #30 & #69

shyakadavis · Dec 8, 2024 · ff4a39f · ff4a39f
1 parent ab9a300
commit ff4a39f
Show file tree

Hide file tree

Showing 9 changed files with 42 additions and 29 deletions.
diff --git a/src/lib/components/shared/command/command.svelte b/src/lib/components/shared/command/command.svelte
@@ -33,19 +33,22 @@
 		<Drawer.Content preventScroll class="h-3/4" hide_dismiss_bar>
 			<Command.Root>
 				<Drawer.Header
-					class="flex h-[53px] items-center justify-between px-2 [&_[data-command-input-wrapper]]:w-full"
+					class="flex h-[53px] items-center justify-between border-b p-0 py-4 [&_[data-command-input-wrapper]]:w-full [&_[data-command-input-wrapper]]:border-b-0"
 				>
-					<Command.Input placeholder="Search..." class="h-7 px-2 text-base" hide_search_icon />
+					<Command.Input placeholder="Search..." class="h-7 w-full text-base" hide_search_icon />
 					<Button
 						onclick={command_open_state.toggle}
 						size="sm"
 						variant="secondary"
-						class="h-5 px-1.5 text-xs"
+						class="mr-2 h-5 px-1.5 text-xs"
 					>
 						Esc
 					</Button>
 				</Drawer.Header>
-				{@render command_items()}
+				<Command.List class="max-h-none">
+					{@render empty_command()}
+					{@render command_items()}
+				</Command.List>
 			</Command.Root>
 		</Drawer.Content>
 	</Drawer.Root>

diff --git a/src/lib/components/ui/modal/modal-content.svelte b/src/lib/components/ui/modal/modal-content.svelte
@@ -29,7 +29,7 @@
 	<Dialog.Content
 		bind:ref
 		class={cn(
-			'max-h-[80vh] overflow-y-auto bg-background-100 p-0 dark:bg-background-200 sm:rounded-xl',
+			'bg-background-100 p-0 dark:bg-background-200 sm:rounded-xl',
 			// open animation
 			'data-[state=open]:duration-1000 data-[state=open]:zoom-in-100 data-[state=open]:slide-in-from-top-[60%]',
 			// close animation
@@ -41,7 +41,6 @@
 		{@render children?.()}
 	</Dialog.Content>
 {:else}
-	<!-- TODO: Handle overflowing content on small screens. Right now, it needs to be specified consumer-side. -->
 	<Drawer.Content hide_dismiss_bar class="bg-background-100 dark:bg-background-200">
 		{@render children?.()}
 	</Drawer.Content>

diff --git a/src/lib/components/ui/modal/modal-footer.svelte b/src/lib/components/ui/modal/modal-footer.svelte
@@ -39,7 +39,13 @@
 	</Dialog.Footer>
 {:else}
 	<Drawer.Footer class="flex-row justify-between border-t bg-background-200 dark:bg-background-100">
-		<Drawer.Close class={cn(button_variants({ variant: 'secondary' }))}>Cancel</Drawer.Close>
+		<Drawer.Close
+			class={cn(button_variants({ variant: 'secondary' }), {
+				'w-full': full_width
+			})}
+		>
+			Cancel
+		</Drawer.Close>
 		{@render children?.()}
 	</Drawer.Footer>
 {/if}
diff --git a/src/routes/modal/+page.svelte b/src/routes/modal/+page.svelte
@@ -20,7 +20,7 @@
 		<Default />
 	</Demo>
 
-	<Demo id="sticky" code={sticky_code}>
+	<Demo id="sticky" subtitle="`Note:` Overflow must be handled consumer-side." code={sticky_code}>
 		<Sticky />
 	</Demo>
 

diff --git a/src/routes/modal/default.svelte b/src/routes/modal/default.svelte
@@ -1,12 +1,11 @@
 <script lang="ts">
-	import { Button } from '$lib/components/ui/button';
+	import { Button, button_variants } from '$lib/components/ui/button';
 	import * as Modal from '$lib/components/ui/modal';
+	import { cn } from '$lib/utils';
 </script>
 
 <Modal.Root>
-	<Modal.Trigger>
-		<Button size="sm">Open Modal</Button>
-	</Modal.Trigger>
+	<Modal.Trigger class={cn(button_variants({ size: 'sm' }))}>Open Modal</Modal.Trigger>
 
 	<Modal.Content>
 		<Modal.Header>

diff --git a/src/routes/modal/disabled-actions.svelte b/src/routes/modal/disabled-actions.svelte
@@ -1,12 +1,11 @@
 <script lang="ts">
-	import { Button } from '$lib/components/ui/button';
+	import { Button, button_variants } from '$lib/components/ui/button';
 	import * as Modal from '$lib/components/ui/modal';
+	import { cn } from '$lib/utils';
 </script>
 
 <Modal.Root>
-	<Modal.Trigger>
-		<Button size="sm">Open Modal</Button>
-	</Modal.Trigger>
+	<Modal.Trigger class={cn(button_variants({ size: 'sm' }))}>Open Modal</Modal.Trigger>
 
 	<Modal.Content>
 		<Modal.Header>

diff --git a/src/routes/modal/inset.svelte b/src/routes/modal/inset.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
-	import { Button } from '$lib/components/ui/button';
+	import { Button, button_variants } from '$lib/components/ui/button';
 	import * as Modal from '$lib/components/ui/modal';
+	import { cn } from '$lib/utils';
 
 	let open = $state(false);
 
@@ -10,9 +11,7 @@
 </script>
 
 <Modal.Root bind:open>
-	<Modal.Trigger>
-		<Button size="sm">Open Modal</Button>
-	</Modal.Trigger>
+	<Modal.Trigger class={cn(button_variants({ size: 'sm' }))}>Open Modal</Modal.Trigger>
 
 	<Modal.Content>
 		<Modal.Header>

diff --git a/src/routes/modal/single-button.svelte b/src/routes/modal/single-button.svelte
@@ -1,12 +1,11 @@
 <script lang="ts">
-	import { Button } from '$lib/components/ui/button';
+	import { button_variants } from '$lib/components/ui/button';
 	import * as Modal from '$lib/components/ui/modal';
+	import { cn } from '$lib/utils';
 </script>
 
 <Modal.Root>
-	<Modal.Trigger>
-		<Button size="sm">Open Modal</Button>
-	</Modal.Trigger>
+	<Modal.Trigger class={cn(button_variants({ size: 'sm' }))}>Open Modal</Modal.Trigger>
 
 	<Modal.Content>
 		<Modal.Header>

diff --git a/src/routes/modal/sticky.svelte b/src/routes/modal/sticky.svelte
@@ -1,24 +1,33 @@
 <script lang="ts">
 	import { Icons } from '$lib/assets/icons';
-	import { Button } from '$lib/components/ui/button';
+	import { Button, button_variants } from '$lib/components/ui/button';
 	import * as Modal from '$lib/components/ui/modal';
+	import { cn } from '$lib/utils';
 
 	let open = $state(false);
 
 	const close = () => (open = !open);
 </script>
 
 <Modal.Root bind:open>
-	<Modal.Trigger>
-		<Button size="sm">Open Modal</Button>
-	</Modal.Trigger>
+	<Modal.Trigger class={cn(button_variants({ size: 'sm' }))}>Open Modal</Modal.Trigger>
 
 	<Modal.Content>
 		<Modal.Header>
 			<Modal.Title>Create Token</Modal.Title>
 		</Modal.Header>
 
-		<div class="px-6 py-3 text-sm">
+		<!-- ! Overflow must be handled consumer-side. -->
+		<div class="max-h-96 overflow-y-auto px-6 py-3 text-sm md:max-h-[60dvh]">
+			<p>Some content contained within the modal.</p>
+			<p>Some content contained within the modal.</p>
+			<p>Some content contained within the modal.</p>
+			<p>Some content contained within the modal.</p>
+			<p>Some content contained within the modal.</p>
+			<p>Some content contained within the modal.</p>
+			<p>Some content contained within the modal.</p>
+			<p>Some content contained within the modal.</p>
+			<p>Some content contained within the modal.</p>
 			<p>Some content contained within the modal.</p>
 			<p>Some content contained within the modal.</p>
 			<p>Some content contained within the modal.</p>