Drop-down for size

src/App.css

@@ -168,6 +168,7 @@ input {
 /* TabNavigation styles */
 .tablist {
   display: flex;
+  align-items: center;
   gap: 0.5rem;
   overflow-x: auto;
   margin-bottom: 12px;
@@ -181,6 +182,18 @@ input {
   display: none;
 }
 
+.tablist-right {
+  margin-left: auto;
+  display: flex;
+  align-items: center;
+}
+
+.size-select {
+  width: auto;
+  padding: 4px 24px 4px 8px;
+  font-size: 11px;
+}
+
 .tab-btn {
   position: relative;
   background: none;

src/components/TabNavigation.tsx

@@ -9,12 +9,14 @@ interface TabNavigationProps {
   tabs: Tab[]
   activeTab: string
   setActiveTab: (tabKey: string) => void
+  rightContent?: React.ReactNode
 }
 
 const TabNavigation: React.FC<TabNavigationProps> = ({
   tabs,
   activeTab,
   setActiveTab,
+  rightContent,
 }) => (
   <div role="tablist" aria-label="Main Tabs" className="tablist">
     {tabs.map((tab) => {
@@ -35,6 +37,9 @@ const TabNavigation: React.FC<TabNavigationProps> = ({
         </button>
       )
     })}
+    {rightContent && (
+      <div className="tablist-right">{rightContent}</div>
+    )}
   </div>
 )
 

src/main.jsx

@@ -27,18 +27,31 @@ const queryClient = new QueryClient({
   },
 })
 
+const SIZE_OPTIONS = [
+  { value: 'default', label: 'Default' },
+  { value: 'comfortable', label: 'Comfortable' },
+  { value: 'large', label: 'Large' },
+  { value: 'compact', label: 'Compact' },
+]
+
 const App = () => {
   const [activeTab, setActiveTab] = useState('api')
   const [selectedExampleCategory, setSelectedExampleCategory] = useState('')
   const [selectedFunctionName, setSelectedFunctionName] = useState('')
+  const [extensionSize, setExtensionSize] = useState('large')
   const containerRef = useRef(null)
   const hasInitializedRef = useRef(false)
 
   useEffect(() => {
-    // Set initial size
-    webflow.setExtensionSize({ height: 425, width: 500 })
+    webflow.setExtensionSize('large')
   }, [])
 
+  const handleSizeChange = (e) => {
+    const size = e.target.value
+    setExtensionSize(size)
+    webflow.setExtensionSize(size)
+  }
+
   // Auto-initialize first example and function
   useEffect(() => {
     if (!hasInitializedRef.current) {
@@ -160,6 +173,20 @@ const App = () => {
         tabs={TABS}
         activeTab={activeTab}
         setActiveTab={setActiveTab}
+        rightContent={
+          <select
+            className="w-select size-select"
+            value={extensionSize}
+            onChange={handleSizeChange}
+            aria-label="Window size"
+          >
+            {SIZE_OPTIONS.map((opt) => (
+              <option key={opt.value} value={opt.value}>
+                {opt.label}
+              </option>
+            ))}
+          </select>
+        }
       />
       {activeTab === 'api' && (
         <APIExplorer