From 6a7ec95493287d195c035283360d69c62d638adf Mon Sep 17 00:00:00 2001
From: lebaudantoine <lebaud.antoine131@gmail.com>
Date: Wed, 14 Aug 2024 18:28:56 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84(frontend)=20create=20padding=20var?=
 =?UTF-8?q?iants=20for=20TabPanel?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Inspired by other videoconferencing tools' designs.
Sizes are mixing pixels and rem, it should be harmonized.
Will be used by the advanced settings panels.
---
 src/frontend/src/primitives/Tabs.tsx | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/src/frontend/src/primitives/Tabs.tsx b/src/frontend/src/primitives/Tabs.tsx
index ad3ecc41..f5636216 100644
--- a/src/frontend/src/primitives/Tabs.tsx
+++ b/src/frontend/src/primitives/Tabs.tsx
@@ -150,7 +150,6 @@ export const TabList = ({ children, border, ...props }: TabListProps) => {
 const StyledTabPanel = styled(RACTabPanel, {
   base: {
     marginTop: '4px',
-    padding: '10px',
     borderRadius: '4px',
     outline: 'none',
     '&[data-focus-visible]': {
@@ -165,6 +164,18 @@ const StyledTabPanel = styled(RACTabPanel, {
         overflow: 'auto',
       },
     },
+    padding: {
+      sm: {
+        padding: '10px',
+      },
+      md: {
+        padding: '2rem',
+      },
+    },
+  },
+  defaultVariants: {
+    padding: 'sm',
+    flex: false,
   },
 })