fix padding and hover highlight in tabs (#243)

src-web/commands/openWorkspaceSettings.tsx

@@ -14,7 +14,7 @@ export function openWorkspaceSettings(tab?: WorkspaceSettingsTab) {
     id: 'workspace-settings',
     title: 'Workspace Settings',
     size: 'md',
-    className: 'h-[calc(100vh-5rem)] max-h-[40rem]',
+    className: 'h-[calc(100vh-5rem)] !max-h-[40rem]',
     noPadding: true,
     render: ({ hide }) => (
       <WorkspaceSettingsDialog workspaceId={workspaceId} hide={hide} tab={tab} />

src-web/components/Settings/Settings.tsx

@@ -74,22 +74,22 @@ export default function Settings({ hide }: Props) {
         onChangeValue={setTab}
         tabs={tabs.map((value) => ({ value, label: capitalize(value) }))}
       >
-        <TabContent value={TAB_GENERAL} className="pt-3 overflow-y-auto h-full px-4">
+        <TabContent value={TAB_GENERAL} className="overflow-y-auto h-full px-4">
           <SettingsGeneral />
         </TabContent>
-        <TabContent value={TAB_INTERFACE} className="pt-3 overflow-y-auto h-full px-4">
+        <TabContent value={TAB_INTERFACE} className="overflow-y-auto h-full px-4">
           <SettingsInterface />
         </TabContent>
-        <TabContent value={TAB_THEME} className="pt-3 overflow-y-auto h-full px-4">
+        <TabContent value={TAB_THEME} className="overflow-y-auto h-full px-4">
           <SettingsTheme />
         </TabContent>
-        <TabContent value={TAB_PLUGINS} className="pt-3 h-full px-4 grid grid-rows-1">
+        <TabContent value={TAB_PLUGINS} className="h-full px-4 grid grid-rows-1">
           <SettingsPlugins />
         </TabContent>
-        <TabContent value={TAB_PROXY} className="pt-3 overflow-y-auto h-full px-4">
+        <TabContent value={TAB_PROXY} className="overflow-y-auto h-full px-4">
           <SettingsProxy />
         </TabContent>
-        <TabContent value={TAB_LICENSE} className="pt-3 overflow-y-auto h-full px-4">
+        <TabContent value={TAB_LICENSE} className="overflow-y-auto h-full px-4">
           <SettingsLicense />
         </TabContent>
       </Tabs>

src-web/components/core/Tabs/Tabs.tsx

@@ -84,7 +84,7 @@ export function Tabs({
           tabListClassName,
           addBorders && '!-ml-1',
           'flex items-center hide-scrollbars mb-2',
-          layout === 'horizontal' && 'h-full overflow-auto px-2',
+          layout === 'horizontal' && 'h-full overflow-auto p-2',
           layout === 'vertical' && 'overflow-x-auto overflow-y-visible ',
           // Give space for button focus states within overflow boundary.
           layout === 'vertical' && 'py-1 -ml-5 pl-3 pr-1',
@@ -100,9 +100,9 @@ export function Tabs({
             const isActive = t.value === value;
             const btnClassName = classNames(
               'h-sm flex items-center rounded whitespace-nowrap',
-              '!px-2 ml-[1px]',
+              '!px-2 ml-[1px] hocus:text-text',
-              addBorders && 'border',
+              addBorders && 'border hocus:bg-surface-highlight',
-              isActive ? 'text-text' : 'text-text-subtle hover:text-text',
+              isActive ? 'text-text' : 'text-text-subtle',
               isActive && addBorders
                 ? 'border-surface-active bg-surface-active'
                 : layout === 'vertical'
@@ -177,7 +177,7 @@ export const TabContent = memo(function TabContent({
       <div
         tabIndex={-1}
         data-tab={value}
-        className={classNames(className, 'tab-content', 'hidden w-full h-full')}
+        className={classNames(className, 'tab-content', 'hidden w-full h-full py-2')}
       >
         {children}
       </div>