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

@@ -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">

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%;

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">

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">

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>