Merge pull request #2 from Exgene/main

style: update /features style

Author: prathwik0

src/routes/(nav)/(grid)/user-submit.svelte

@@ -23,10 +23,12 @@
 </script>
 
 <div class="mb-0 flex flex-col items-center justify-center gap-y-10">
-	<div class="mb-0 flex w-full flex-col items-center justify-center gap-x-4 gap-y-4 sm:flex-row px-16">
+	<div
+		class="mb-0 flex w-full flex-col items-center justify-center gap-x-4 gap-y-4 px-16 sm:flex-row"
+	>
 		<Select.Root bind:selected={source_country}>
 			<Select.Trigger
-				class="h-16 w-full max-w-sm justify-center gap-x-2 rounded-full border-2 sm:text-lg text-base"
+				class="h-16 w-full max-w-sm justify-center gap-x-2 rounded-full border-2 text-base sm:text-lg"
 			>
 				<Select.Value placeholder="Source" />
 			</Select.Trigger>
@@ -39,7 +41,7 @@
 
 		<Select.Root bind:selected={dest_country}>
 			<Select.Trigger
-				class="h-16 w-full max-w-sm justify-center gap-x-2 rounded-full border-2 sm:text-lg text-base"
+				class="h-16 w-full max-w-sm justify-center gap-x-2 rounded-full border-2 text-base sm:text-lg"
 			>
 				<Select.Value placeholder="Destination" />
 			</Select.Trigger>
@@ -52,7 +54,7 @@
 
 		<Select.Root bind:selected={product_category}>
 			<Select.Trigger
-				class="h-16 w-full max-w-sm justify-center gap-x-2 rounded-full border-2 sm:text-lg text-base"
+				class="h-16 w-full max-w-sm justify-center gap-x-2 rounded-full border-2 text-base sm:text-lg"
 			>
 				<Select.Value placeholder="Product Category" />
 			</Select.Trigger>

src/routes/(nonav)/features/+page.svelte

@@ -2,12 +2,13 @@
 	import * as Card from '$lib/components/ui/card';
 	import * as Drawer from '$lib/components/ui/drawer';
 
-	import SvelteMarkdown from 'svelte-markdown';
 	import { Separator } from '$lib/components/ui/separator';
+	import { Icons } from '$lib/icons';
+	import SvelteMarkdown from 'svelte-markdown';
+	import Map from './Map.svelte';
+	import ResultTable from './ResultTable.svelte';
 	import UserForm from './user-form.svelte';
 	import UserMenu from './user-menu.svelte';
-	import ResultTable from './ResultTable.svelte';
-	import Map from './Map.svelte';
 
 	import { PUBLIC_MAPS_API_KEY } from '$env/static/public';
 
@@ -19,7 +20,7 @@
 
 <div class="flex h-screen flex-col gap-6 px-4 py-6 md:px-16">
 	<!-- Header Section -->
-	<div class="hidden flex-col items-center gap-2 sm:flex sm:flex-row md:gap-6">
+	<div class="hidden w-full flex-col items-center gap-2 sm:flex sm:flex-row md:gap-6">
 		<UserMenu></UserMenu>
 		<Card.Root class="w-full">
 			<!-- <Card.Content class="w-full"> -->
@@ -28,12 +29,14 @@
 		</Card.Root>
 	</div>
 
-	<div class="flex flex-row items-center gap-2 sm:hidden">
+	<div class="flex w-full flex-row items-center gap-2 sm:hidden">
 		<UserMenu></UserMenu>
 		<Drawer.Root>
 			<Drawer.Trigger>
 				<Card.Root class="h-full w-full shadow-lg">
-					<Card.Content class="flex min-w-[40vw] align-middle text-xl">Options</Card.Content>
+					<Card.Content class="flex gap-2 font-bold h-full w-full items-center justify-center p-3 text-sm"
+						><p>Options</p><Icons.pizza /></Card.Content
+					>
 				</Card.Root>
 			</Drawer.Trigger>
 			<Drawer.Content>
@@ -44,7 +47,7 @@
 	</div>
 
 	<!-- Maps and Results Sections -->
-	<div class="flex h-[70vh] flex-col gap-2 sm:flex-row md:gap-4">
+	<div class="flex h-full flex-col gap-2 sm:h-[70vh] sm:flex-row md:gap-4">
 		<!-- The map -->
 		<Map
 			class="h-full w-full rounded-lg border shadow-lg sm:w-2/3"

src/routes/(nonav)/features/user-menu.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
+	import { ThemeToggleButton } from '$lib/components/theme';
 	import * as Card from '$lib/components/ui/card';
 	import { Separator } from '$lib/components/ui/separator';
 	import { Icons } from '$lib/icons';
 	import ProfileButton from '$lib/profile/profile-button.svelte';
-	import { ThemeToggleButton } from '$lib/components/theme';
 
 	/* ******************************************************** */
 
@@ -17,8 +17,10 @@
 	// let product_hs = url.searchParams.get('product');
 </script>
 
-<Card.Root class="h-full sm:w-fit shadow-lg w-full">
-	<Card.Content class="flex h-full flex-row sm:flex-col items-center sm:justify-between justify-around px-2 sm:pb-2 pb-0">
+<Card.Root class="h-full w-full shadow-lg sm:w-fit">
+	<Card.Content
+		class="flex h-full flex-row items-center justify-around px-2 pb-0 sm:flex-col sm:justify-between sm:pb-2"
+	>
 		<a href="/" class="my-2">
 			<Icons.logoDark class="hidden rounded-full dark:block" />
 			<Icons.logo class="rounded-full dark:hidden" />