styling updates

Author: dev-dist

src/features/feeds/components/Tables.module.css

@@ -59,12 +59,18 @@
   background-color: var(--gray-50);
   border-radius: var(--border-radius);
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-  transition: box-shadow 0.2s ease;
+  transition: all 0.2s ease;
   user-select: none;
 }
 
 .expandableHeader:hover {
-  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
+  background-color: var(--gray-100) !important;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
+}
+
+.expandableHeader:focus-visible {
+  outline: 2px solid var(--blue-500);
+  outline-offset: 2px;
 }
 
 .expandableHeader:active {
@@ -298,17 +304,24 @@
   margin: 0 0 var(--space-2x) 0;
 }
 
+.tableContainer {
+  border: 1px solid var(--border-color, #e5e7eb);
+  border-radius: 4px;
+  overflow: hidden;
+  margin-top: var(--space-3x);
+  margin-left: var(--space-4x);
+}
+
 .networksTable {
   width: 100%;
   border-collapse: collapse !important;
   font-size: 0.875rem;
   margin-bottom: 0;
   table-layout: fixed !important;
-  border: 1px solid var(--border-color, #e5e7eb);
-  border-radius: 4px;
+  border: none !important;
+  border-radius: 0;
 }
 
-.networksTable,
 .networksTable tr,
 .networksTable td {
   border: none;

src/features/feeds/components/Tables.tsx

@@ -637,7 +637,7 @@ export const StreamsNetworkAddressesTable = ({
       )}
 
       {(!allowExpansion || isExpanded) && (
-        <div>
+        <div className={tableStyles.tableContainer}>
           <div className={feedList.filterDropdown_search} style={{ padding: "0.5rem" }}>
             <div style={{ display: "flex", alignItems: "center", gap: "0.5rem", flex: 1 }}>
               <input