Skip to content

Commit e0d7300

Browse files
amcaplanclaude
amcaplan
and
claude
committed
Restore GraphiQL header layout and styling to match original
Fixed header layout structure and styling to match the original template implementation that was lost during the React 18 migration. Changes: 1. Header Layout Structure (GraphiQL.tsx): - Restructured to use LeftSection (status + controls + links) and RightSection (scopes note) - Groups primary controls together on the left side - Positions scopes note on the right side - Matches original template design from git history 2. Header CSS Layout (GraphiQL.module.scss): - Changed from Flexbox to CSS Grid with 2 columns (7fr 5fr ratio) - Added LeftSection with flexbox for control grouping - Added RightSection with justify-self: end for right alignment - Fixed background color to white (#ffffff) instead of grey Polaris default - Updated responsive behavior at 1080px breakpoint 3. Icon Sizing Fixes: - StatusBadge: Shrunk Polaris icons to 1rem × 1rem - LinkPills: Shrunk icons to match original styling - Wrapped badges in containers with icon-shrinking CSS 4. Global Styles (index.html): - Added body overflow: hidden - Added .Polaris-Page--fullWidth width: 100% Original layout and styling verified against git history at commit b27ac4a. Quality gates: All 89 tests passing, build successful. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]>
1 parent 12ce632 commit e0d7300

File tree

6 files changed

+71
-29
lines changed

6 files changed

+71
-29
lines changed

‎packages/graphiql-console/index.html‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,17 @@
55
<link rel="icon" type="image/x-icon" href="/src/assets/favicon.ico" />
66
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
77
<title>GraphiQL Console</title>
8+
<style>
9+
body {
10+
height: 100%;
11+
margin: 0;
12+
width: 100%;
13+
overflow: hidden;
14+
}
15+
.Polaris-Page--fullWidth {
16+
width: 100%;
17+
}
18+
</style>
819
</head>
920
<body>
1021
<div id="root"></div>

‎packages/graphiql-console/src/components/LinkPills/LinkPills.module.scss‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,11 @@
22
display: flex;
33
gap: 8px;
44
align-items: center;
5+
6+
// Shrink icons in link badges to match original GraphiQL styling
7+
:global(.Polaris-Icon) {
8+
height: 1rem;
9+
width: 1rem;
10+
margin: 0.125rem;
11+
}
512
}

‎packages/graphiql-console/src/components/StatusBadge/StatusBadge.module.scss‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,6 @@
1-
// Placeholder styles - Track 3 will implement
1+
// Shrink icons in badges to match original GraphiQL styling
2+
.Badge :global(.Polaris-Icon) {
3+
height: 1rem;
4+
width: 1rem;
5+
margin: 0.125rem;
6+
}

‎packages/graphiql-console/src/components/StatusBadge/StatusBadge.tsx‎

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import * as styles from './StatusBadge.module.scss'
12
import React from 'react'
23
import {Badge} from '@shopify/polaris'
34
import {AlertCircleIcon, DisabledIcon} from '@shopify/polaris-icons'
@@ -17,17 +18,21 @@ export function StatusBadge({status}: StatusBadgeProps) {
1718
// Priority: disconnected > unauthorized > running
1819
if (!serverIsLive) {
1920
return (
20-
<Badge tone="critical" icon={DisabledIcon}>
21-
Disconnected
22-
</Badge>
21+
<div className={styles.Badge}>
22+
<Badge tone="critical" icon={DisabledIcon}>
23+
Disconnected
24+
</Badge>
25+
</div>
2326
)
2427
}
2528

2629
if (!appIsInstalled) {
2730
return (
28-
<Badge tone="attention" icon={AlertCircleIcon}>
29-
App uninstalled
30-
</Badge>
31+
<div className={styles.Badge}>
32+
<Badge tone="attention" icon={AlertCircleIcon}>
33+
App uninstalled
34+
</Badge>
35+
</div>
3136
)
3237
}
3338

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

Lines changed: 16 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -12,15 +12,26 @@
1212
}
1313

1414
.Header {
15-
display: flex;
15+
display: grid;
16+
grid-template-columns: 7fr 5fr;
1617
align-items: center;
17-
justify-content: space-between;
1818
padding: 16px;
1919
border-bottom: 1px solid var(--p-color-border, #e1e3e5);
20-
background: var(--p-color-bg, #ffffff);
20+
background: #ffffff;
2121
gap: 16px;
2222
}
2323

24+
.LeftSection {
25+
display: flex;
26+
align-items: center;
27+
gap: 16px;
28+
flex-wrap: wrap;
29+
}
30+
31+
.RightSection {
32+
justify-self: end;
33+
}
34+
2435
.StatusSection {
2536
display: flex;
2637
align-items: center;
@@ -31,7 +42,6 @@
3142
display: flex;
3243
align-items: center;
3344
gap: 8px;
34-
flex-grow: 1;
3545
}
3646

3747
.ScopesNote {
@@ -97,9 +107,9 @@
97107
}
98108

99109
@media only screen and (max-width: 1080px) {
100-
.StatusSection {
110+
.RightSection {
101111
// Adjust layout for narrower screens
102-
justify-self: left;
112+
justify-self: start;
103113
}
104114
}
105115

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

Lines changed: 20 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -52,27 +52,31 @@ export function GraphiQLSection() {
5252
)}
5353

5454
<div className={styles.Header}>
55-
<div className={styles.StatusSection}>
56-
<StatusBadge status={status} />
57-
</div>
55+
<div className={styles.LeftSection}>
56+
<div className={styles.StatusSection}>
57+
<StatusBadge status={status} />
58+
</div>
5859

59-
<div className={styles.ControlsSection}>
60-
<label htmlFor="api-version-select" style={{marginRight: '8px'}}>
61-
API version:
62-
</label>
63-
<div style={{minWidth: '150px'}}>
64-
<ApiVersionSelector versions={config.apiVersions} value={selectedVersion} onChange={handleVersionChange} />
60+
<div className={styles.ControlsSection}>
61+
<label htmlFor="api-version-select" style={{marginRight: '8px'}}>
62+
API version:
63+
</label>
64+
<div style={{minWidth: '150px'}}>
65+
<ApiVersionSelector versions={config.apiVersions} value={selectedVersion} onChange={handleVersionChange} />
66+
</div>
6567
</div>
66-
</div>
6768

68-
<div className={styles.ScopesNote}>
69-
<Text as="span" tone="subdued">
70-
GraphiQL runs on the same access scopes you've defined in the TOML file for your app.
71-
</Text>
69+
<div className={styles.LinksSection}>
70+
<LinkPills status={status} />
71+
</div>
7272
</div>
7373

74-
<div className={styles.LinksSection}>
75-
<LinkPills status={status} />
74+
<div className={styles.RightSection}>
75+
<div className={styles.ScopesNote}>
76+
<Text as="span" tone="subdued">
77+
GraphiQL runs on the same access scopes you've defined in the TOML file for your app.
78+
</Text>
79+
</div>
7680
</div>
7781
</div>
7882

0 commit comments

Comments
 (0)