Fix GraphiQL header responsive behavior

Restores the responsive layout behavior that was lost during the React 18
migration. The original implementation used Polaris Grid with responsive
column classes that automatically stacked content vertically on narrow
screens. The new CSS Grid implementation was fixed at 7fr/5fr which didn't
adapt to screen size.

Changes:
- Made grid responsive: single column on narrow screens (<1081px), two
  columns (7fr 5fr) on wide screens
- Fixed scopes note alignment: left-aligned when stacked vertically on
  narrow screens, right-aligned in side column on wide screens
- Added top-bar-section-title class to "API version:" label so existing
  media query can hide it on narrow screens (<1550px)
- Cleaned up test type assertions (linter fixes)

The header now properly adapts to different screen sizes, matching the
original Polaris Grid responsive behavior.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <[email protected]>

Author: amcaplan

packages/graphiql-console/src/components/ApiVersionSelector/ApiVersionSelector.test.tsx

@@ -34,7 +34,7 @@ describe('<ApiVersionSelector />', () => {
     const onChange = vi.fn()
     renderWithProvider(<ApiVersionSelector versions={defaultVersions} value="2024-10" onChange={onChange} />)
 
-    const select = screen.getByLabelText('API version') as HTMLSelectElement
+    const select = screen.getByLabelText('API version')
 
     expect(select.options).toHaveLength(5)
     expect(select.options[0].value).toBe('2024-01')
@@ -48,7 +48,7 @@ describe('<ApiVersionSelector />', () => {
     const onChange = vi.fn()
     renderWithProvider(<ApiVersionSelector versions={defaultVersions} value="2024-07" onChange={onChange} />)
 
-    const select = screen.getByLabelText('API version') as HTMLSelectElement
+    const select = screen.getByLabelText('API version')
     expect(select.value).toBe('2024-07')
   })
 
@@ -68,15 +68,15 @@ describe('<ApiVersionSelector />', () => {
     const onChange = vi.fn()
     renderWithProvider(<ApiVersionSelector versions={[]} value="" onChange={onChange} />)
 
-    const select = screen.getByLabelText('API version') as HTMLSelectElement
+    const select = screen.getByLabelText('API version')
     expect(select.options).toHaveLength(0)
   })
 
   test('handles single version', () => {
     const onChange = vi.fn()
     renderWithProvider(<ApiVersionSelector versions={['2024-10']} value="2024-10" onChange={onChange} />)
 
-    const select = screen.getByLabelText('API version') as HTMLSelectElement
+    const select = screen.getByLabelText('API version')
     expect(select.options).toHaveLength(1)
     expect(select.options[0].value).toBe('2024-10')
   })
@@ -86,7 +86,7 @@ describe('<ApiVersionSelector />', () => {
     const onChange = vi.fn()
     renderWithProvider(<ApiVersionSelector versions={customVersions} value="v2" onChange={onChange} />)
 
-    const select = screen.getByLabelText('API version') as HTMLSelectElement
+    const select = screen.getByLabelText('API version')
     expect(select.options[0].value).toBe('v1')
     expect(select.options[1].value).toBe('v2')
     expect(select.options[2].value).toBe('v3-beta')

packages/graphiql-console/src/sections/GraphiQL/GraphiQL.module.scss

@@ -13,7 +13,7 @@
 
 .Header {
   display: grid;
-  grid-template-columns: 7fr 5fr;
+  grid-template-columns: 1fr;  // Single column on narrow screens
   align-items: center;
   padding: 16px;
   border-bottom: 1px solid var(--p-color-border, #e1e3e5);
@@ -29,7 +29,14 @@
 }
 
 .RightSection {
-  justify-self: end;
+  justify-self: start;  // Left-align by default (single column on narrow screens)
+}
+
+// Right-align only on wide screens with two-column layout
+@media only screen and (min-width: 1081px) {
+  .RightSection {
+    justify-self: end;
+  }
 }
 
 .StatusSection {
@@ -106,10 +113,10 @@
   }
 }
 
-@media only screen and (max-width: 1080px) {
-  .RightSection {
-    // Adjust layout for narrower screens
-    justify-self: start;
+// Switch to two-column layout at wider screens
+@media only screen and (min-width: 1081px) {
+  .Header {
+    grid-template-columns: 7fr 5fr;
   }
 }
 

packages/graphiql-console/src/sections/GraphiQL/GraphiQL.tsx

@@ -58,11 +58,15 @@ export function GraphiQLSection() {
           </div>
 
           <div className={styles.ControlsSection}>
-            <label htmlFor="api-version-select" style={{marginRight: '8px'}}>
+            <label htmlFor="api-version-select" className="top-bar-section-title" style={{marginRight: '8px'}}>
               API version:
             </label>
             <div style={{minWidth: '150px'}}>
-              <ApiVersionSelector versions={config.apiVersions} value={selectedVersion} onChange={handleVersionChange} />
+              <ApiVersionSelector
+                versions={config.apiVersions}
+                value={selectedVersion}
+                onChange={handleVersionChange}
+              />
             </div>
           </div>