fix: Hide tab container from UI, fix theme-aware border colors

- Remove "New Tab Container" from Add menu since multi-tab support
  is not yet implemented. The schema and rendering code remain for
  backward compatibility but the feature is not user-creatable until
  add/remove/rename tab support is built.
- Replace all var(--mantine-color-dark-4) borders with
  var(--mantine-color-default-border) for light theme support.
- Replace var(--mantine-color-dark-6) backgrounds in drag overlay
  with var(--mantine-color-body) for theme awareness.

Author: alex-fedotyev

packages/app/src/DBDashboardPage.tsx

@@ -61,7 +61,6 @@ import { notifications } from '@mantine/notifications';
 import {
   IconArrowsMaximize,
   IconBell,
-  IconBoxMultiple,
   IconChartBar,
   IconCopy,
   IconDeviceFloppy,
@@ -2111,13 +2110,7 @@ function DBDashboardPage({ presetConfig }: { presetConfig?: Dashboard }) {
           >
             New Section
           </Menu.Item>
-          <Menu.Item
-            data-testid="add-new-tab-menu-item"
-            leftSection={<IconBoxMultiple size={16} />}
-            onClick={() => handleAddContainer('tab')}
-          >
-            New Tab Container
-          </Menu.Item>
+          {/* Tab container hidden until multi-tab support is implemented */}
           <Menu.Item
             data-testid="add-new-group-menu-item"
             leftSection={<IconSquaresDiagonal size={16} />}

packages/app/src/components/DashboardDndContext.tsx

@@ -129,8 +129,8 @@ export function DashboardDndProvider({
           <Box
             p="xs"
             style={{
-              background: 'var(--mantine-color-dark-6)',
-              border: '1px solid var(--mantine-color-dark-4)',
+              background: 'var(--mantine-color-body)',
+              border: '1px solid var(--mantine-color-default-border)',
               borderRadius: 4,
               opacity: 0.85,
               maxWidth: 280,
@@ -146,8 +146,8 @@ export function DashboardDndProvider({
             px="sm"
             py={4}
             style={{
-              background: 'var(--mantine-color-dark-6)',
-              border: '1px solid var(--mantine-color-dark-4)',
+              background: 'var(--mantine-color-body)',
+              border: '1px solid var(--mantine-color-default-border)',
               borderRadius: 4,
               opacity: 0.85,
             }}
@@ -223,7 +223,7 @@ export function SectionDropZone({
         border: isOver
           ? '2px dashed var(--mantine-color-blue-5)'
           : isEmpty
-            ? '2px dashed var(--mantine-color-dark-4)'
+            ? '2px dashed var(--mantine-color-default-border)'
             : undefined,
         background: isOver ? 'rgba(51, 154, 240, 0.05)' : undefined,
         transition: 'border-color 150ms, background 150ms',

packages/app/src/components/GroupContainer.tsx

@@ -47,7 +47,7 @@ export default function GroupContainer({
       onMouseEnter={() => setHovered(true)}
       onMouseLeave={() => setHovered(false)}
       style={{
-        border: '1px solid var(--mantine-color-dark-4)',
+        border: '1px solid var(--mantine-color-default-border)',
         borderRadius: 4,
         marginTop: 8,
       }}
@@ -57,7 +57,9 @@ export default function GroupContainer({
         gap="xs"
         px="sm"
         py={4}
-        style={{ borderBottom: '1px solid var(--mantine-color-dark-4)' }}
+        style={{
+          borderBottom: '1px solid var(--mantine-color-default-border)',
+        }}
       >
         {dragHandleProps && (
           <div

packages/app/src/components/SectionHeader.tsx

@@ -62,7 +62,7 @@ export default function SectionHeader({
       onMouseEnter={() => setHovered(true)}
       onMouseLeave={() => setHovered(false)}
       style={{
-        borderBottom: '1px solid var(--mantine-color-dark-4)',
+        borderBottom: '1px solid var(--mantine-color-default-border)',
         userSelect: 'none',
       }}
       data-testid={`section-header-${section.id}`}

packages/app/src/components/TabContainer.tsx

@@ -54,7 +54,7 @@ export default function TabContainer({
       onMouseEnter={() => setHovered(true)}
       onMouseLeave={() => setHovered(false)}
       style={{
-        border: '1px solid var(--mantine-color-dark-4)',
+        border: '1px solid var(--mantine-color-default-border)',
         borderRadius: 4,
         marginTop: 8,
       }}
@@ -64,7 +64,9 @@ export default function TabContainer({
         gap="xs"
         px="sm"
         py={4}
-        style={{ borderBottom: '1px solid var(--mantine-color-dark-4)' }}
+        style={{
+          borderBottom: '1px solid var(--mantine-color-default-border)',
+        }}
       >
         {editing ? (
           <form