diff --git a/CHANGELOG.md b/CHANGELOG.md
index 03b8a6a..eda05e5 100644
--- a/CHANGELOG.md
+++ b/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
diff --git a/src/components/copy-button.tsx b/src/components/copy-button.tsx
index e9fe890..bb84ffa 100644
--- a/src/components/copy-button.tsx
+++ b/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
diff --git a/src/components/data-table.tsx b/src/components/data-table.tsx
index 485de24..d2c0906 100644
--- a/src/components/data-table.tsx
+++ b/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>
diff --git a/src/components/ui/pagination.tsx b/src/components/ui/pagination.tsx
index 92d256f..6775195 100644
--- a/src/components/ui/pagination.tsx
+++ b/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}
diff --git a/src/components/ui/sidebar.tsx b/src/components/ui/sidebar.tsx
index d3faba2..467ba86 100644
--- a/src/components/ui/sidebar.tsx
+++ b/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()