Make elements sticky

qwtel · Aug 31, 2024 · 5625738 · 5625738
1 parent 79bae95
commit 5625738
Show file tree

Hide file tree

Showing 5 changed files with 11 additions and 8 deletions.
diff --git a/app/components/PaginationButtons.tsx b/app/components/PaginationButtons.tsx
@@ -14,7 +14,7 @@ const PaginationButtons: React.FC<PaginationButtonsProps> = ({
     handlePagination,
 }) => {
     return (
-        <div className="p-2 pr-0 grid grid-cols-[auto,2rem,2rem] text-right">
+        <div className="p-2 pr-0 grid grid-cols-[auto,2rem,2rem] text-right border-t sticky bottom-0 bg-card" style={{ marginTop: "-2px" }}>
             <div></div>
             <button
                 onClick={() => {

diff --git a/app/components/ui/card.tsx b/app/components/ui/card.tsx
@@ -10,7 +10,7 @@ const Card = React.forwardRef<
     <div
         ref={ref}
         className={cn(
-            "rounded-lg border border-2 bg-card text-card-foreground shadow-sm",
+            "rounded-lg border border-2 bg-card text-card-foreground shadow-sm overflow-clip",
             className,
         )}
         {...props}

diff --git a/app/components/ui/table.tsx b/app/components/ui/table.tsx
@@ -7,10 +7,10 @@ const Table = React.forwardRef<
     HTMLTableElement,
     React.HTMLAttributes<HTMLTableElement>
 >(({ className, ...props }, ref) => (
-    <div className="relative w-full overflow-auto">
+    <div className="relative w-full">
         <div
             ref={ref}
-            className={cn("w-full caption-bottom text-sm", className)}
+            className={cn("w-full h-full caption-bottom text-sm overflow-clip", className)}
             {...props}
         />
     </div>
@@ -23,7 +23,8 @@ const TableHeader = React.forwardRef<
 >(({ className, ...props }, ref) => (
     <div
         ref={ref}
-        className={cn("[&_tr]:border-b grid", className)}
+        className={cn("[&_tr]:border-b grid sticky top-[3.5rem] bg-card border-t-2", className)}
+        style={{ ...props.style, marginTop: '-2px' }}
         {...props}
     />
 ));

diff --git a/app/root.tsx b/app/root.tsx
@@ -114,7 +114,7 @@ export default function App() {
     const data = useLoaderData<typeof loader>();
     return (
         <div className="mt-4">
-            <header className="border-b-2 mb-8 py-2">
+            <header className="border-b-2 mb-6 py-2">
                 <nav className="flex justify-between items-center">
                     <div className="flex items-center">
                         <a href="/" className="text-lg font-bold">

diff --git a/app/routes/dashboard.tsx b/app/routes/dashboard.tsx
@@ -222,7 +222,7 @@ export default function Dashboard() {
 
     return (
         <div style={{ fontFamily: "system-ui, sans-serif", lineHeight: "1.8" }}>
-            <div className="w-full mb-4 flex gap-4 flex-wrap">
+            <div className="w-full py-2 flex gap-4 flex-wrap sticky top-0 z-20 bg-background">
                 <div className="lg:basis-1/5-gap-4 sm:basis-1/4-gap-4 basis-1/2-gap-4">
                     <Select
                         defaultValue={data.siteId}
@@ -274,8 +274,9 @@ export default function Dashboard() {
             </div>
 
             <div className="transition" style={{ opacity: loading ? 0.6 : 1 }}>
-                <div className="w-full mb-4">
+                <div className="w-full mb-4 mt-2">
                     <Card>
+                        <div className="sticky top-[3.5rem] border-t-2 z-10" style={{ marginTop: '-2px' }}></div>
                         <div className="p-4 pl-6">
                             <div className="grid grid-cols-3 gap-10 items-end">
                                 <div>
@@ -306,6 +307,7 @@ export default function Dashboard() {
                 </div>
                 <div className="w-full mb-4">
                     <Card>
+                        <div className="sticky top-[3.5rem] border-t-2 z-10" style={{ marginTop: '-2px' }}></div>
                         <CardContent>
                             <div className="h-72 pt-6 -m-4 -ml-8 sm:m-0">
                                 <TimeSeriesChart