mishig HF Staff Claude Sonnet 4.5 commited on
Commit
59276b5
·
1 Parent(s): 4e9b962

Improve separator UI visibility and usability

Browse files

Make 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>

Files changed (1) hide show
  1. 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-1 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.05rem] rounded-full bg-gray-400"></div>
255
  </div>
256
 
257
  <div
@@ -274,11 +274,11 @@
274
 
275
  <!-- svelte-ignore a11y_no_static_element_interactions -->
276
  <div
277
- class="hidden h-1 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.05rem] w-12 rounded-full bg-gray-400"></div>
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}%">