aplance-ui 1.4.0 → 1.5.0

package/registry/components/ui/data-table/data-table.module.css

@@ -181,6 +181,12 @@
   scrollbar-gutter: auto;
 }
 
+/* The columns fit (`columnsFit` in data-table.tsx): nothing to scroll to
+   sideways, so a sub-pixel overhang can't raise a horizontal scrollbar. */
+.table_body_wrap[data-fits="true"] {
+  overflow-x: hidden;
+}
+
 /* ─────────────────────────────────────────────
    Shared <table> - header wrap + body wrap.
    table-layout:fixed + identical widths = perfect column alignment.
@@ -209,6 +215,16 @@
   tbody tr {
     transition: background var(--transition-fast);
 
+    /* The last row's line is a shadow, not a border. A shadow never adds to
+       the body's scroll height, and the body clips it at its own edge: with
+       space left under the rows it closes them, and where the rows reach the
+       body's border it is cut off instead of drawing a second line there.
+       Placed before the drop target, which wins on a last row. */
+    &:last-child td {
+      border-bottom: none;
+      box-shadow: 0 var(--border-1) 0 var(--color-border);
+    }
+
     &:hover td {
       background: var(--color-secondary);
     }
@@ -589,55 +605,59 @@
   flex-shrink: 0;
   margin-top: auto;
   width: 100%;
+  min-width: 0;
   display: flex;
+  /* The count and the controls share a row while both fit; past that the
+     controls take a row of their own below. Nothing scrolls or clips. */
+  flex-wrap: wrap;
   align-items: center;
   justify-content: space-between;
-  gap: var(--spacing-8);
-  min-width: 0;
-  /* When the count + controls can't fit, the WHOLE bar scrolls horizontally as
-     one strip rather than wrapping or clipping. The outlet hides X overflow, so
-     letting a cluster shrink would just clip the nav buttons - scroll the bar
-     instead. `space-between` still spreads them when there IS room. The vertical
-     padding gives the buttons' focus rings room so `overflow-x: auto` (which also
-     clips the Y axis) doesn't crop them. */
-  overflow-x: auto;
-  scrollbar-width: thin;
-  scrollbar-color: var(--color-border) transparent;
-  padding-block: var(--spacing-2);
-
-  > * {
-    flex-shrink: 0;
-  }
+  column-gap: var(--spacing-8);
+  row-gap: var(--spacing-4);
 }
 
 @media (--sm) {
   .pagination_bar {
-    gap: var(--spacing-5);
+    column-gap: var(--spacing-5);
   }
 }
 
-.pagination_bar_loading {
-  flex-wrap: wrap;
-  row-gap: var(--spacing-4);
-}
-
 .loading_select_skeleton {
   border-radius: var(--radius-sm);
   flex-shrink: 0;
 }
 
+/* The count, then what a page adds beside it, like the actions on ticked
+   rows. The block sizes from nothing and never below its count, so the
+   controls wrap only once the count alone and they cannot share a row; on
+   their row it takes what the controls leave, and its extra scrolls there. */
 .pagination_left {
   display: flex;
   align-items: center;
   gap: var(--spacing-8);
-  min-width: 0;
+  flex: 1 1 0;
+  min-width: min-content;
 }
 
 .pagination_left_loading {
   overflow: hidden;
 }
 
+/* The extra slot, a ScrollRail: it takes what the count leaves on the row
+   and scrolls across on its own, with no scrollbar, so the bar never changes
+   height. Its items claim no width of the row (inline-size containment):
+   however many there are, the controls keep their place beside the count. */
+.pagination_extra {
+  flex: 1 1 0;
+  contain: inline-size;
+}
+
+.pagination_extra_items {
+  gap: var(--spacing-4);
+}
+
 .pagination_count {
+  flex-shrink: 0;
   font-size: var(--font-size-sm);
   color: var(--color-muted-foreground);
   white-space: nowrap;
@@ -650,14 +670,37 @@
 
 .pagination_controls {
   display: flex;
+  flex-wrap: wrap;
   align-items: center;
-  gap: var(--spacing-8);
+  justify-content: flex-end;
+  column-gap: var(--spacing-8);
+  row-gap: var(--spacing-4);
   min-width: 0;
 }
 
+/* A phone gives the controls a row of their own: the page size at its start,
+   the pages at its end. The size keeps its label for screen readers only, and
+   the first/last buttons go: prev/next and the page number say as much. */
 @media (--sm) {
   .pagination_controls {
-    gap: var(--spacing-5);
+    flex-basis: 100%;
+    column-gap: var(--spacing-5);
+  }
+
+  .page_size_wrap {
+    margin-inline-end: auto;
+  }
+
+  .page_size_label {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+  }
+
+  .page_nav_edge {
+    display: none;
   }
 }