Improve separator UI visibility and usability
Browse filesMake the draggable separators thicker and easier to select by increasing
their width/height and making the visual indicator lines more prominent.
Changes:
- Increased vertical separator width from w-1 (4px) to w-2 (8px)
- Increased horizontal separator height from h-1 (4px) to h-2 (8px)
- Made indicator lines thicker (from 0.05rem to 0.5/2px)
- Added margin to horizontal indicator for better visual balance
This improves the user experience by making the separators much easier
to grab and drag, especially on smaller screens or when using precise input.
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
- src/routes/+page.svelte +4 -4
src/routes/+page.svelte
CHANGED
|
@@ -247,11 +247,11 @@
|
|
| 247 |
|
| 248 |
<!-- svelte-ignore a11y_no_static_element_interactions -->
|
| 249 |
<div
|
| 250 |
-
class="hidden h-full w-
|
| 251 |
style="left: calc({leftWidth}% - 4px); z-index:10;"
|
| 252 |
on:mousedown={startDragVertical}
|
| 253 |
>
|
| 254 |
-
<div class="h-12 w-
|
| 255 |
</div>
|
| 256 |
|
| 257 |
<div
|
|
@@ -274,11 +274,11 @@
|
|
| 274 |
|
| 275 |
<!-- svelte-ignore a11y_no_static_element_interactions -->
|
| 276 |
<div
|
| 277 |
-
class="hidden h-
|
| 278 |
style="top: calc({topHeight}% - 4px); z-index:10;"
|
| 279 |
on:mousedown={startDragHorizontal}
|
| 280 |
>
|
| 281 |
-
<div class="h-
|
| 282 |
</div>
|
| 283 |
|
| 284 |
<div class="w-full" style="height: {100 - topHeight}%">
|
|
|
|
| 247 |
|
| 248 |
<!-- svelte-ignore a11y_no_static_element_interactions -->
|
| 249 |
<div
|
| 250 |
+
class="hidden h-full w-2 cursor-col-resize items-center justify-center bg-gray-100 select-none hover:bg-blue-200 active:bg-blue-200 sm:flex dark:bg-gray-700 dark:hover:bg-blue-900 dark:active:bg-blue-900"
|
| 251 |
style="left: calc({leftWidth}% - 4px); z-index:10;"
|
| 252 |
on:mousedown={startDragVertical}
|
| 253 |
>
|
| 254 |
+
<div class="h-12 w-0.5 rounded-full bg-gray-400"></div>
|
| 255 |
</div>
|
| 256 |
|
| 257 |
<div
|
|
|
|
| 274 |
|
| 275 |
<!-- svelte-ignore a11y_no_static_element_interactions -->
|
| 276 |
<div
|
| 277 |
+
class="hidden h-2 w-full cursor-row-resize items-center justify-center bg-gray-100 select-none hover:bg-blue-200 active:bg-blue-200 sm:flex dark:bg-gray-700 dark:hover:bg-blue-900 dark:active:bg-blue-900"
|
| 278 |
style="top: calc({topHeight}% - 4px); z-index:10;"
|
| 279 |
on:mousedown={startDragHorizontal}
|
| 280 |
>
|
| 281 |
+
<div class="h-0.5 w-12 my-2 rounded-full bg-gray-400"></div>
|
| 282 |
</div>
|
| 283 |
|
| 284 |
<div class="w-full" style="height: {100 - topHeight}%">
|