[CSS] Set Bucket width and scroll vertically to show other Buckets

ismaail · Oct 23, 2024 · 05f4e9a · 05f4e9a
1 parent ac941c4
commit 05f4e9a
Show file tree

Hide file tree

Showing 2 changed files with 2 additions and 2 deletions.
diff --git a/resources/views/livewire/board/board-component.blade.php b/resources/views/livewire/board/board-component.blade.php
@@ -17,7 +17,7 @@ class="flex w-full flex-grow items-start overflow-y-hidden mt-4 space-x-3">
 		@foreach($buckets as $bucket)
 			<livewire:bucket.bucket-component :key="$bucket->id" :bucket="$bucket" />
 		@endforeach
-			<button class="flex items-center gap-x-1 w-72 p-2 rounded text-white hover:text-primary font-semibold cursor-pointer">
+			<button class="flex basis-36 shrink-0 items-center gap-x-1 w-72 p-2 rounded text-white hover:text-primary font-semibold cursor-pointer">
 				<x-icons.plus class="size-5" /> New Bucket
 			</button>
 	</div>

diff --git a/resources/views/livewire/bucket/bucket-component.blade.php b/resources/views/livewire/bucket/bucket-component.blade.php
@@ -1,6 +1,6 @@
 <div
 		wire:sortable.item="{{ $bucket->id }}"
-		class="w-72 p-2 space-y-2 rounded bg-gray-100 max-h-full overflow-y-auto scrollbar">
+		class="basis-72 shrink-0 p-2 space-y-2 rounded bg-gray-100 max-h-full overflow-y-auto scrollbar">
 	{{-- Bucket Name & Tasks Count --}}
 	<div class="flex items-start justify-between">
 		{{-- Bucket Title + Cards/ count --}}