From 0487d2f4f0a1c6c84dd62e5ac33083fdc436197c Mon Sep 17 00:00:00 2001
From: Bob <dv4xd@proton.me>
Date: Fri, 2 Aug 2024 14:49:20 +0800
Subject: [PATCH] problem: login button is shitty on small screens

---
 src/components/Login.svelte        | 12 +++++++-----
 src/layouts/SidePanelLayout.svelte | 16 +++++++---------
 2 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/src/components/Login.svelte b/src/components/Login.svelte
index 4426046..6d50265 100644
--- a/src/components/Login.svelte
+++ b/src/components/Login.svelte
@@ -36,13 +36,11 @@
 </script>
 
 {#if !$ndk.signer}
-	<Button on:click={nip07}>
-		<span class="hidden sm:block">Sign in</span>
-	</Button>
+	<Button on:click={nip07} class="shrink-0">Sign in</Button>
 {:else}
 	<DropdownMenu.Root>
 		<DropdownMenu.Trigger asChild let:builder>
-			<Button builders={[builder]} variant="secondary" size="icon" class="rounded-full">
+			<Button builders={[builder]} variant="secondary" size="icon" class="shrink-0 rounded-full">
 				<Avatar ndk={$ndk} {pubkey} class="h-10 w-10 flex-none rounded-full object-cover" />
 				<span class="sr-only">Toggle user menu</span>
 			</Button>
@@ -50,7 +48,11 @@
 		<DropdownMenu.Content align="end">
 			<DropdownMenu.Label>My Account</DropdownMenu.Label>
 			<DropdownMenu.Separator />
-			<DropdownMenu.Item on:click={()=>{goto(`${base}/sellmerits`)}}>Sell Merits</DropdownMenu.Item>
+			<DropdownMenu.Item
+				on:click={() => {
+					goto(`${base}/sellmerits`);
+				}}>Sell Merits</DropdownMenu.Item
+			>
 			<DropdownMenu.Item>Buy Merits</DropdownMenu.Item>
 			<DropdownMenu.Separator />
 			<DropdownMenu.Item>Settings</DropdownMenu.Item>
diff --git a/src/layouts/SidePanelLayout.svelte b/src/layouts/SidePanelLayout.svelte
index b38610b..992f000 100644
--- a/src/layouts/SidePanelLayout.svelte
+++ b/src/layouts/SidePanelLayout.svelte
@@ -1,18 +1,14 @@
 <script lang="ts">
-	import Bell from 'lucide-svelte/icons/bell';
-	import CircleUser from 'lucide-svelte/icons/circle-user';
 	import Menu from 'lucide-svelte/icons/menu';
 	import Search from 'lucide-svelte/icons/search';
 
 	import { Button } from '$lib/components/ui/button/index.js';
 	import { Input } from '$lib/components/ui/input/index.js';
 	import * as Sheet from '$lib/components/ui/sheet/index.js';
-	import { Rocket } from 'lucide-svelte';
 	import NewMenu from '../components/Menu.svelte';
 	import RocketPillCard from '../components/RocketPillCard.svelte';
 	import { base } from '$app/paths';
 	import Login from '../components/Login.svelte';
-	import { page } from '$app/stores';
 
 	export let title = '';
 </script>
@@ -36,7 +32,9 @@
 		</div>
 	</div>
 	<div class="flex h-dvh flex-col">
-		<header class="flex h-14 items-center gap-4 border-b bg-muted/40 px-4 lg:h-[60px] lg:px-6">
+		<header
+			class="flex h-14 items-center justify-center gap-4 border-b bg-muted/40 px-4 lg:h-[60px] lg:px-6"
+		>
 			<Sheet.Root>
 				<Sheet.Trigger asChild let:builder>
 					<Button variant="outline" size="icon" class="shrink-0 md:hidden" builders={[builder]}>
@@ -58,18 +56,18 @@
 			</Sheet.Root>
 
 			<div
-				class="flex items-center bg-indigo-800 p-2 leading-none text-indigo-100 lg:inline-flex lg:rounded-full"
+				class="flex shrink items-center gap-1 bg-indigo-800 p-1 leading-none text-indigo-100 sm:p-2 lg:inline-flex lg:rounded-full"
 				role="alert"
 			>
-				<span class="mr-3 flex rounded-full bg-indigo-500 px-2 py-1 text-xs font-bold uppercase"
+				<span class="flex rounded-full bg-indigo-500 px-2 py-1 text-xs font-bold uppercase"
 					>Alert</span
 				>
-				<span class="mr-2 flex-auto text-left font-semibold"
+				<span class="flex-auto text-left font-semibold"
 					>Nostrocket is sooooo not ready yet but whatever</span
 				>
 			</div>
 
-			<div class="w-full flex-1">
+			<div class="w-full flex-1 shrink">
 				<form>
 					<div class="relative">
 						<Search class="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />