more styling changes

Author: dev-dist

src/features/feeds/components/ExpandableTableWrapper.tsx

@@ -36,13 +36,13 @@ export const ExpandableTableWrapper = ({
 }: ExpandableTableWrapperProps) => {
   const [isExpanded, setIsExpanded] = useState(defaultExpanded)
 
-  // If expansion is not allowed, always show content without header
+  // If expansion is not allowed, still wrap content but without the header
   if (!allowExpansion) {
-    return <>{children}</>
+    return <div className={tableStyles.tableContainer}>{children}</div>
   }
 
   return (
-    <div>
+    <div className={tableStyles.expandableWrapper}>
       <div
         className={tableStyles.expandableHeader}
         onClick={() => setIsExpanded(!isExpanded)}

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

@@ -49,23 +49,25 @@
   margin-right: var(--space-1x);
 }
 
-/* Expandable header */
+/* Expandable wrapper and header */
+.expandableWrapper {
+  background-color: var(--gray-50);
+  border-radius: var(--border-radius);
+  padding: var(--space-3x);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
 .expandableHeader {
   display: flex;
   align-items: center;
   gap: var(--space-2x);
-  padding: var(--space-3x);
   cursor: pointer;
-  background-color: var(--gray-50);
-  border-radius: var(--border-radius);
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
   transition: all 0.2s ease;
   user-select: none;
 }
 
-.expandableHeader:hover {
-  background-color: var(--gray-100) !important;
-  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
+.expandableWrapper:hover .expandableHeader {
+  opacity: 0.9;
 }
 
 .expandableHeader:focus-visible {