Rework tab and tab list padding and gaps to match designs (#1529)

front/src/modules/ui/tab/components/TabList.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import styled from '@emotion/styled';
 
 import { IconComponent } from '@/ui/icon/types/IconComponent';
 import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
@@ -20,6 +21,15 @@ type TabListProps = {
   context: React.Context<string | null>;
 };
 
+const StyledContainer = styled.div`
+  border-bottom: ${({ theme }) => `1px solid ${theme.border.color.light}`};
+  box-sizing: border-box;
+  display: flex;
+  gap: ${({ theme }) => theme.spacing(2)};
+  height: 40px;
+  padding-left: ${({ theme }) => theme.spacing(2)};
+`;
+
 export function TabList({ tabs, context }: TabListProps) {
   const initialActiveTabId = tabs[0].id;
 
@@ -33,7 +43,7 @@ export function TabList({ tabs, context }: TabListProps) {
   }, [initialActiveTabId, setActiveTabId]);
 
   return (
-    <>
+    <StyledContainer>
       {tabs
         .filter((tab) => !tab.hide)
         .map((tab) => (
@@ -49,6 +59,6 @@ export function TabList({ tabs, context }: TabListProps) {
             disabled={tab.disabled}
           />
         ))}
-    </>
+    </StyledContainer>
   );
 }