Fix long statuses. Not perfect but good for now

src/components/ui/Tech_Table.tsx

@@ -4,6 +4,7 @@ import { useSession } from "next-auth/react";
 import Loading from "~/components/ui/Loading";
 import { useTVMode } from "~/components/context/TVModeContext";
 import { Drawer, DrawerTrigger } from "~/components/ui/shadcn/drawer";
+import { ScrollArea } from "~/components/ui/shadcn/scroll-area";
 
 import History_Drawer from "~/components/ui/History_Drawer";
 
@@ -211,11 +212,13 @@ export default function Tech_Table({ employees }: { employees: Employee[] }) {
                   {employee.name}
                 </td>
                 <td className="s-column max-w-[700px] px-1 md:py-3 border
-                  border-[#3e4446] wrapword">
+                  border-[#3e4446] wrapword max-h-0">
                     <Drawer>
                       <DrawerTrigger>
                       <button onClick={() => handleStatusClick(employee.id)}>
-                        {employee.status}
+                        <ScrollArea className="w-full m-auto h-[60px]">
+                          {employee.status}
+                        </ScrollArea>
                       </button>
                       </DrawerTrigger>
                       {selectedUserId !== -1 && (

src/components/ui/scroll-area.tsx

@@ -0,0 +1,48 @@
+"use client"
+
+import * as React from "react"
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
+
+import { cn } from "~/lib/utils"
+
+const ScrollArea = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
+>(({ className, children, ...props }, ref) => (
+  <ScrollAreaPrimitive.Root
+    ref={ref}
+    className={cn("relative overflow-hidden", className)}
+    {...props}
+  >
+    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
+      {children}
+    </ScrollAreaPrimitive.Viewport>
+    <ScrollBar />
+    <ScrollAreaPrimitive.Corner />
+  </ScrollAreaPrimitive.Root>
+))
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName
+
+const ScrollBar = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
+>(({ className, orientation = "vertical", ...props }, ref) => (
+  <ScrollAreaPrimitive.ScrollAreaScrollbar
+    ref={ref}
+    orientation={orientation}
+    className={cn(
+      "flex touch-none select-none transition-colors",
+      orientation === "vertical" &&
+        "h-full w-2.5 border-l border-l-transparent p-[1px]",
+      orientation === "horizontal" &&
+        "h-2.5 flex-col border-t border-t-transparent p-[1px]",
+      className
+    )}
+    {...props}
+  >
+    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
+  </ScrollAreaPrimitive.ScrollAreaScrollbar>
+))
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName
+
+export { ScrollArea, ScrollBar }

src/server/functions.ts

@@ -128,45 +128,3 @@ export const get_history = async (user_id: number, page: number, perPage: number
     }
   };
 };
-
-//export const getHistory =
-  //async (page: number, perPage: number): Promise<PaginatedHistory> => {
-  //const offset = (page - 1) * perPage;
-  //const historyQuery = sql`
-    //SELECT u.name, h.status, h.updatedAt
-    //FROM history h
-    //JOIN users u ON h.user_id = u.id
-    //ORDER BY h.id DESC
-    //LIMIT ${perPage} OFFSET ${offset}
-  //`;
-  //const countQuery = sql`
-    //SELECT COUNT(*) AS total_count
-    //FROM history
-  //`;
-  //const [historyResults, countResults] = await Promise.all([
-    //db.execute(historyQuery), 
-    //db.execute(countQuery),
-  //]);
-  //// Safely cast results
-  //const historyRows = historyResults[0] as unknown as
-    //{ name: string, status: string, updatedAt: Date }[];
-  //const countRow = countResults[0] as unknown as { total_count: number }[];
-  //const totalCount = countRow[0]?.total_count ?? 0;
-  //const totalPages = Math.ceil(totalCount / perPage);
-  //// Format and map results
-  //const formattedResults: HistoryEntry[] = historyRows.map(row => ({
-    //name: row.name,
-    //status: row.status,
-    //updatedAt: new Date(row.updatedAt),
-  //}));
-  //return {
-    //data: formattedResults,
-    //meta: {
-      //current_page: page,
-      //per_page: perPage,
-      //total_pages: totalPages,
-      //total_count: totalCount,
-    //}
-  //};
-//};
-

src/styles/globals.css

@@ -128,20 +128,12 @@
 
 .techtable-fullscreen {
   width: 100%;
-  height: 100%;
+  /*height: 100%;*/
+  height: 80vh;
+
 }
 
 .tablefill {
   height: 10vh;
 }
 
-.wrapword {
-    white-space: -moz-pre-wrap !important;  /* Mozilla, since 1999 */
-    white-space: -webkit-pre-wrap;          /* Chrome & Safari */ 
-    white-space: -pre-wrap;                 /* Opera 4-6 */
-    white-space: -o-pre-wrap;               /* Opera 7 */
-    white-space: pre-wrap;                  /* CSS3 */
-    word-wrap: break-word;                  /* Internet Explorer 5.5+ */
-    word-break: break-all;
-    white-space: normal;
-}