From a563ad26cd4e71c318c3d72dc2141e242561d0b2 Mon Sep 17 00:00:00 2001
From: Pulse Monitor <pulse@pulse-monitor.dev>
Date: Tue, 26 Aug 2025 19:47:38 +0000
Subject: [PATCH] fix: hide scrollbars on all tables throughout the UI

- ScrollableTable component (used by Guest table)
- Storage table
- Backups table (both main and PBS sections)
- ResourceTable (Alerts)
- GuestURLs table (Settings)
- All tables still scroll but without visible scrollbars
- Works across all browsers (Chrome, Firefox, Safari, Edge)
---
 frontend-modern/src/components/Alerts/ResourceTable.tsx   | 5 ++++-
 frontend-modern/src/components/Backups/UnifiedBackups.tsx | 8 ++++++--
 frontend-modern/src/components/Settings/GuestURLs.tsx     | 5 ++++-
 frontend-modern/src/components/Storage/Storage.tsx        | 5 ++++-
 frontend-modern/src/components/shared/ScrollableTable.tsx | 6 +++++-
 5 files changed, 23 insertions(+), 6 deletions(-)

diff --git a/frontend-modern/src/components/Alerts/ResourceTable.tsx b/frontend-modern/src/components/Alerts/ResourceTable.tsx
index fa68162b0..221983c89 100644
--- a/frontend-modern/src/components/Alerts/ResourceTable.tsx
+++ b/frontend-modern/src/components/Alerts/ResourceTable.tsx
@@ -73,7 +73,10 @@ export function ResourceTable(props: ResourceTableProps) {
       <div class="px-4 py-3 border-b border-gray-200 dark:border-gray-700">
         <h3 class="text-sm font-medium text-gray-900 dark:text-gray-100">{props.title}</h3>
       </div>
-      <div class="overflow-x-auto">
+      <div class="overflow-x-auto" style="scrollbar-width: none; -ms-overflow-style: none;">
+        <style>{`
+          .overflow-x-auto::-webkit-scrollbar { display: none; }
+        `}</style>
         <table class="w-full">
           <thead>
             <tr class="bg-gray-50 dark:bg-gray-900 border-b border-gray-200 dark:border-gray-700">
diff --git a/frontend-modern/src/components/Backups/UnifiedBackups.tsx b/frontend-modern/src/components/Backups/UnifiedBackups.tsx
index c32740a18..5f8721c75 100644
--- a/frontend-modern/src/components/Backups/UnifiedBackups.tsx
+++ b/frontend-modern/src/components/Backups/UnifiedBackups.tsx
@@ -886,7 +886,10 @@ const UnifiedBackups: Component = () => {
       {/* Removed old PBS table */}
       <Show when={false && sortedPBSInstances().length > 0}>
         <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700">
-          <div class="overflow-x-auto">
+          <div class="overflow-x-auto" style="scrollbar-width: none; -ms-overflow-style: none;">
+            <style>{`
+              .overflow-x-auto::-webkit-scrollbar { display: none; }
+            `}</style>
             <table class="w-full">
               <thead>
                 <tr class="border-b border-gray-200 dark:border-gray-700">
@@ -1437,8 +1440,9 @@ const UnifiedBackups: Component = () => {
 
       {/* Table */}
       <div class="mb-4 bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700">
-        <div class="overflow-x-auto">
+        <div class="overflow-x-auto" style="scrollbar-width: none; -ms-overflow-style: none;">
         <style>{`
+          .overflow-x-auto::-webkit-scrollbar { display: none; }
           .backup-table {
             table-layout: fixed;
             width: 100%;
diff --git a/frontend-modern/src/components/Settings/GuestURLs.tsx b/frontend-modern/src/components/Settings/GuestURLs.tsx
index eb1527183..dcb1be9eb 100644
--- a/frontend-modern/src/components/Settings/GuestURLs.tsx
+++ b/frontend-modern/src/components/Settings/GuestURLs.tsx
@@ -173,7 +173,10 @@ export function GuestURLs(props: GuestURLsProps) {
             <div class="text-gray-500 dark:text-gray-400">Loading guest URLs...</div>
           </div>
         }>
-          <div class="overflow-x-auto">
+          <div class="overflow-x-auto" style="scrollbar-width: none; -ms-overflow-style: none;">
+            <style>{`
+              .overflow-x-auto::-webkit-scrollbar { display: none; }
+            `}</style>
             <table class="w-full">
               <thead>
                 <tr class="bg-gray-50 dark:bg-gray-900 border-b border-gray-200 dark:border-gray-700">
diff --git a/frontend-modern/src/components/Storage/Storage.tsx b/frontend-modern/src/components/Storage/Storage.tsx
index 10d2d9d6f..5486b40b2 100644
--- a/frontend-modern/src/components/Storage/Storage.tsx
+++ b/frontend-modern/src/components/Storage/Storage.tsx
@@ -260,7 +260,10 @@ const Storage: Component = () => {
       <Show when={connected() && initialDataReceived() && sortedStorage().length > 0}>
         <ComponentErrorBoundary name="Storage Table">
           <div class="mb-4 bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700">
-            <div class="overflow-x-auto">
+            <div class="overflow-x-auto" style="scrollbar-width: none; -ms-overflow-style: none;">
+              <style>{`
+                .overflow-x-auto::-webkit-scrollbar { display: none; }
+              `}</style>
             <table class="w-full">
               <thead>
                 <tr class="border-b border-gray-200 dark:border-gray-700">
diff --git a/frontend-modern/src/components/shared/ScrollableTable.tsx b/frontend-modern/src/components/shared/ScrollableTable.tsx
index 4b3a574b0..3f114bd50 100644
--- a/frontend-modern/src/components/shared/ScrollableTable.tsx
+++ b/frontend-modern/src/components/shared/ScrollableTable.tsx
@@ -42,8 +42,12 @@ export const ScrollableTable: Component<ScrollableTableProps> = (props) => {
       {/* Scrollable container */}
       <div 
         ref={scrollContainer}
-        class="overflow-x-auto scrollbar-thin scrollbar-thumb-gray-400 dark:scrollbar-thumb-gray-600"
+        class="overflow-x-auto"
+        style="scrollbar-width: none; -ms-overflow-style: none;"
       >
+        <style>{`
+          .overflow-x-auto::-webkit-scrollbar { display: none; }
+        `}</style>
         <div style={{ "min-width": props.minWidth || 'auto' }}>
           {props.children}
         </div>