fix: keep screen-reader-only text inside its component

CHANGELOG.md

@@ -2,6 +2,12 @@
 
 All notable changes to `@flycommerce/ui` are listed here. The format follows [Keep a Changelog](https://keepachangelog.com/en/1.1.0/), and versions follow [semantic versioning](https://semver.org).
 
+## [Unreleased]
+
+### Fixed
+
+- Screen-reader-only text no longer stretches the page in apps whose content scrolls inside a container (an app shell with a scrolling `main`). `sr-only` text is absolutely positioned. In `DataTable` (its loading status and the "More pages" label of its page numbers), `PaginationEllipsis`, `CopyButton` and `SidebarTrigger` it had no positioned ancestor inside the component, so it was placed against the page instead, at its unscrolled position far below the window. That made the document taller than the window, and scrolling past the end of the content moved the whole layout up. Each now has a positioned parent of its own.
+
 ## [0.3.1] - 2026-10-06
 
 ### Fixed

src/components/copy-button.tsx

@@ -1,6 +1,7 @@
 "use client"
 
 import * as React from "react"
+import { cn } from "cn"
 import { FiCheck as CheckIcon, FiCopy as CopyIcon } from "react-icons/fi"
 
 import { Button } from "@/components/ui/button"
@@ -26,6 +27,7 @@ function CopyButton({
   variant = "outline",
   size,
   children,
+  className,
   ...props
 }: CopyButtonProps) {
   const [copied, setCopied] = React.useState(false)
@@ -56,6 +58,7 @@ function CopyButton({
       aria-label={iconOnly ? text : undefined}
       data-copied={copied || undefined}
       onClick={copy}
+      className={cn("relative", className)}
       {...props}
     >
       <Icon

src/components/data-table.tsx

@@ -512,7 +512,7 @@ function DataTable<TData>({
     <div
       data-slot="data-table"
       className={cn(
-        "w-full min-w-0 overflow-hidden rounded-xl bg-card text-card-foreground shadow-card",
+        "relative w-full min-w-0 overflow-hidden rounded-xl bg-card text-card-foreground shadow-card",
         className
       )}
     >
@@ -904,7 +904,7 @@ function DataTablePagination(
               item === "ellipsis" ? (
                 <span
                   key={`ellipsis-${index}`}
-                  className="flex size-8 items-center justify-center text-muted-foreground"
+                  className="relative flex size-8 items-center justify-center text-muted-foreground"
                 >
                   <MoreHorizontalIcon aria-hidden="true" className="size-4" />
                   <span className="sr-only">{labels.morePages}</span>

src/components/ui/pagination.tsx

@@ -116,7 +116,7 @@ function PaginationEllipsis({
     <span
       data-slot="pagination-ellipsis"
       className={cn(
-        "flex size-8 items-center justify-center [&_svg:not([class*='size-'])]:size-4",
+        "relative flex size-8 items-center justify-center [&_svg:not([class*='size-'])]:size-4",
         className
       )}
       {...props}

src/components/ui/sidebar.tsx

@@ -263,7 +263,7 @@ function SidebarTrigger({
       data-slot="sidebar-trigger"
       variant="ghost"
       size="icon-sm"
-      className={cn(className)}
+      className={cn("relative", className)}
       onClick={(event) => {
         onClick?.(event)
         toggleSidebar()