Consolidated styles and ran language test

Author: dlab-anton

webview-ui/src/components/settings/SettingsView.tsx

@@ -63,7 +63,15 @@ import { LanguageSettings } from "./LanguageSettings"
 import { About } from "./About"
 import { Section } from "./Section"
 import { cn } from "@/lib/utils"
-import { settingsTabsContainer, settingsTabList, settingsTabTrigger, settingsTabTriggerActive } from "./styles"
+// Removed: import { settingsTabsContainer, settingsTabList, settingsTabTrigger, settingsTabTriggerActive } from "./styles"
+
+// Inserted settings* definitions (originally lines 87-96 from styles.ts)
+export const settingsTabsContainer = "flex flex-1 overflow-hidden [&.narrow_.tab-label]:hidden"
+export const settingsTabList =
+	"w-48 data-[compact=true]:w-12 flex-shrink-0 flex flex-col overflow-y-auto overflow-x-hidden border-r border-vscode-sideBar-background"
+export const settingsTabTrigger =
+	"whitespace-nowrap overflow-hidden min-w-0 h-12 px-4 py-3 box-border flex items-center border-l-2 border-transparent text-vscode-foreground opacity-70 hover:bg-vscode-list-hoverBackground data-[compact=true]:w-12 data-[compact=true]:p-4"
+export const settingsTabTriggerActive = "opacity-100 border-vscode-focusBorder bg-vscode-list-activeSelectionBackground"
 
 export interface SettingsViewRef {
 	checkUnsaveChanges: (then: () => void) => void

webview-ui/src/components/settings/styles.ts

@@ -1,37 +1,6 @@
 import styled from "styled-components"
 
-export const DropdownWrapper = styled.div`
-	position: relative;
-	width: 100%;
-`
-
-export const DropdownList = styled.div<{ $zIndex: number }>`
-	position: absolute;
-	top: calc(100% - 3px);
-	left: 0;
-	width: calc(100% - 2px);
-	max-height: 200px;
-	overflow-y: auto;
-	background-color: var(--vscode-dropdown-background);
-	border: 1px solid var(--vscode-list-activeSelectionBackground);
-	z-index: ${({ $zIndex }) => $zIndex};
-	border-bottom-left-radius: 3px;
-	border-bottom-right-radius: 3px;
-`
-
-export const DropdownItem = styled.div<{ $selected: boolean }>`
-	padding: 5px 10px;
-	cursor: pointer;
-	word-break: break-all;
-	white-space: normal;
-
-	background-color: ${({ $selected }) => ($selected ? "var(--vscode-list-activeSelectionBackground)" : "inherit")};
-
-	&:hover {
-		background-color: var(--vscode-list-activeSelectionBackground);
-	}
-`
-
+// Keep StyledMarkdown as it's used by ModelDescriptionMarkdown.tsx
 export const StyledMarkdown = styled.div`
 	font-family:
 		var(--vscode-font-family),
@@ -76,34 +45,3 @@ export const StyledMarkdown = styled.div`
 		}
 	}
 `
-
-// Settings tab styles as CSS class names for use with cn function
-// Vertical tabs
-
-// Tailwind-compatible class names for hiding scrollbars
-export const scrollbarHideClasses =
-	"scrollbar-hide [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden"
-
-export const settingsTabsContainer = "flex flex-1 overflow-hidden [&.narrow_.tab-label]:hidden"
-
-// Default width when text labels are shown, narrower when only icons are visible
-export const settingsTabList =
-	"w-48 data-[compact=true]:w-12 flex-shrink-0 flex flex-col overflow-y-auto overflow-x-hidden border-r border-vscode-sideBar-background"
-
-export const settingsTabTrigger =
-	"whitespace-nowrap overflow-hidden min-w-0 h-12 px-4 py-3 box-border flex items-center border-l-2 border-transparent text-vscode-foreground opacity-70 hover:bg-vscode-list-hoverBackground data-[compact=true]:w-12 data-[compact=true]:p-4"
-
-export const settingsTabTriggerActive = "opacity-100 border-vscode-focusBorder bg-vscode-list-activeSelectionBackground"
-
-// CSS classes for when the sidebar is in compact mode (icons only)
-export const settingsCompactMode =
-	"data-[compact=true]:justify-center data-[compact=true]:items-center data-[compact=true]:px-2"
-
-// Utility class to hide scrollbars while maintaining scroll functionality
-export const ScrollbarHide = styled.div`
-	scrollbar-width: none; /* Firefox */
-	-ms-overflow-style: none; /* IE and Edge */
-	&::-webkit-scrollbar {
-		display: none; /* Chrome, Safari, and Opera */
-	}
-`