fix scroll bar

frontend/src/app.css

@@ -1,3 +1,25 @@
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
+@tailwind utilities;
+
+/* Firefox */
+.x-scroll {
+  scrollbar-width: thin;
+  scrollbar-color: white #2F6DCB;
+}
+
+/* Chrome, Edge, and Safari */
+.x-scroll::-webkit-scrollbar {
+  width: 4px;
+}
+
+.x-scroll::-webkit-scrollbar-track {
+  background: white;
+  border-radius: 100px;
+}
+
+.x-scroll::-webkit-scrollbar-thumb {
+  background-color: #2F6DCB;
+  border-radius: 100px;
+  border: 2px solid #2F6DCB;
+}

frontend/src/lib/App.svelte

@@ -193,7 +193,7 @@
 <!-- <div class="fixed top-0 right-0 z-10 p-2">
 	<ShareWithCommunity />
 </div> -->
-<div class="fixed bottom-4 md:bottom-32 left-0 right-0 z-10 my-2">
+<div class="fixed bottom-2 md:bottom-10 left-0 right-0 z-10 my-2">
 	<Menu on:prompt={onPrompt} {isLoading} />
 </div>
 

frontend/src/lib/Buttons/RoomsSelector.svelte

@@ -40,7 +40,7 @@
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
-<div class="min-w-[25ch]">
+<div class="min-w-[20ch]">
 	{#if loadingRooms}
 		<div
 			class="text-sm rounded md:text-smtext-gray-700 py-1 font-medium tracking-tight relative"
@@ -48,11 +48,14 @@
 			bind:this={boxEl}
 		>
 			{#if !collapsed}
-				<div class="absolute left-0 right-0 bottom-full rounded-xl  bg-blue-600 px-1">
-					<ul class="relative overflow-y-scroll max-h-72">
-						<li class="grid-row gap-2 pb-3 sticky top-0 py-2">
+				<div
+					class="absolute left-0 right-0 bottom-full rounded-xl bg-blue-600 px-1 overflow-hidden z-0"
+				>
+					<ul class="relative overflow-hidden overflow-y-scroll max-h-72 w-full x-scroll">
+						<li class="grid-row gap-2 pb-2 sticky top-0 py-2 bg-blue-600 font-semibold">
 							<Room />
 							<span> room </span>
+							<span />
 							<People />
 							<span> players </span>
 						</li>
@@ -72,6 +75,7 @@
 									</span>
 									<span>room {room.id} </span>
 									<span />
+									<span />
 									<span>{room.users_count} / {MAX_CAPACITY}</span>
 								</a>
 							</li>
@@ -91,6 +95,7 @@
 						<span>
 							room {selectedRoom?.id}
 						</span>
+						<span />
 						<People />
 						<span>
 							{selectedRoom?.users_count} / {MAX_CAPACITY}
@@ -120,8 +125,11 @@
 <style lang="postcss" scoped>
 	.grid-row {
 		display: grid;
-		grid-template-columns: 0.5fr 2fr 0.5fr 2fr;
+		grid-template-columns: 0.5fr 2fr 1fr 0.5fr 2fr;
 		align-items: center;
 		justify-items: flex-start;
 	}
+	.grid-row span {
+		white-space: nowrap;
+	}
 </style>

frontend/src/lib/Menu.svelte

@@ -14,7 +14,7 @@
 <svelte:window
 	on:keyup|preventDefault|stopPropagation={(e) => e.key === 'Enter' && dispatch('prompt')}
 />
-<div class="flex flex-col md:flex-row items-center justify-between px-12 gap-4 md:gap-0">
+<div class="flex flex-col md:flex-row items-center justify-between px-12 gap-2 md:gap-0">
 	<AboutButton
 		on:click={() => {
 			$toggleAbout = !$toggleAbout;
@@ -26,7 +26,7 @@
 		disabled={isLoading}
 		class="{isLoading
 			? 'cursor-wait'
-			: 'cursor-pointer'} order-first md:order-none text-3xl bg-blue-600 text-white px-6 py-2 rounded-2xl ring ring-blue-500 font-semibold shadow-2xl self-center flex items-center hover:saturate-150"
+			: 'cursor-pointer'} order-first md:order-none text-xl md:text-3xl bg-blue-600 text-white px-6 py-2 rounded-2xl ring ring-blue-500 font-semibold shadow-2xl self-center flex items-center hover:saturate-150"
 		><span class="mr-3">🖍</span>Paint
 		<span
 			class="bg-blue-800 text-gray-300 rounded-lg px-2 py-0.5 text-base ml-4 hidden sm:flex items-center translate-y-[2px]"