Skip to content

Commit c404394

Browse files
author
Fergus Bisset
committed
fix: remove reserved space
1 parent 2ed5f43 commit c404394

File tree

4 files changed

+85
-102
lines changed

4 files changed

+85
-102
lines changed

‎dist/meta/components.json‎

Lines changed: 85 additions & 85 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
2-
"version": "0.0.44-alpha.12",
3-
"generatedAt": "2025-10-26T11:08:13.671Z",
2+
"version": "0.0.44-alpha.13",
3+
"generatedAt": "2025-10-26T11:09:08.373Z",
44
"count": 18,
55
"components": {
66
"Textarea": {
@@ -426,29 +426,6 @@
426426
],
427427
"source": "src/components/Label/Label.schema.ts"
428428
},
429-
"InsetText": {
430-
"name": "InsetText",
431-
"category": "content",
432-
"since": "0.1.1",
433-
"props": [
434-
{
435-
"name": "text",
436-
"type": "string",
437-
"description": "Plain text content (ignored if html is provided)"
438-
},
439-
{
440-
"name": "html",
441-
"type": "string",
442-
"description": "HTML content (overrides text)"
443-
},
444-
{
445-
"name": "className",
446-
"type": "string",
447-
"description": "Additional CSS classes"
448-
}
449-
],
450-
"source": "src/components/InsetText/InsetText.schema.ts"
451-
},
452429
"Input": {
453430
"name": "Input",
454431
"category": "form",
@@ -591,6 +568,29 @@
591568
],
592569
"source": "src/components/Input/Input.schema.ts"
593570
},
571+
"InsetText": {
572+
"name": "InsetText",
573+
"category": "content",
574+
"since": "0.1.1",
575+
"props": [
576+
{
577+
"name": "text",
578+
"type": "string",
579+
"description": "Plain text content (ignored if html is provided)"
580+
},
581+
{
582+
"name": "html",
583+
"type": "string",
584+
"description": "HTML content (overrides text)"
585+
},
586+
{
587+
"name": "className",
588+
"type": "string",
589+
"description": "Additional CSS classes"
590+
}
591+
],
592+
"source": "src/components/InsetText/InsetText.schema.ts"
593+
},
594594
"Heading": {
595595
"name": "Heading",
596596
"category": "typography",
@@ -880,64 +880,6 @@
880880
],
881881
"source": "src/components/DateInput/DateInput.schema.ts"
882882
},
883-
"Checkboxes": {
884-
"name": "Checkboxes",
885-
"props": [
886-
{
887-
"name": "items",
888-
"type": "CheckboxItem[]",
889-
"required": true,
890-
"description": "Array of checkbox items"
891-
},
892-
{
893-
"name": "name",
894-
"type": "string",
895-
"required": true,
896-
"description": "Shared name attribute"
897-
},
898-
{
899-
"name": "idPrefix",
900-
"type": "string",
901-
"description": "ID prefix for fieldset and inputs"
902-
},
903-
{
904-
"name": "legend",
905-
"type": "string",
906-
"description": "Legend text"
907-
},
908-
{
909-
"name": "isPageHeading",
910-
"type": "boolean",
911-
"description": "Legend rendered as page heading"
912-
},
913-
{
914-
"name": "legendSize",
915-
"type": "\"xl\"|\"l\"|\"m\"|\"s\"",
916-
"description": "Legend size"
917-
},
918-
{
919-
"name": "hint",
920-
"type": "string",
921-
"description": "Group hint text"
922-
},
923-
{
924-
"name": "errorMessage",
925-
"type": "string",
926-
"description": "Group error message"
927-
},
928-
{
929-
"name": "className",
930-
"type": "string",
931-
"description": "Extra wrapper classes"
932-
},
933-
{
934-
"name": "small",
935-
"type": "boolean",
936-
"description": "Small variant"
937-
}
938-
],
939-
"source": "src/components/Checkboxes/Checkboxes.schema.ts"
940-
},
941883
"CharacterCount": {
942884
"name": "CharacterCount",
943885
"props": [
@@ -1018,6 +960,64 @@
1018960
],
1019961
"source": "src/components/CharacterCount/CharacterCount.schema.ts"
1020962
},
963+
"Checkboxes": {
964+
"name": "Checkboxes",
965+
"props": [
966+
{
967+
"name": "items",
968+
"type": "CheckboxItem[]",
969+
"required": true,
970+
"description": "Array of checkbox items"
971+
},
972+
{
973+
"name": "name",
974+
"type": "string",
975+
"required": true,
976+
"description": "Shared name attribute"
977+
},
978+
{
979+
"name": "idPrefix",
980+
"type": "string",
981+
"description": "ID prefix for fieldset and inputs"
982+
},
983+
{
984+
"name": "legend",
985+
"type": "string",
986+
"description": "Legend text"
987+
},
988+
{
989+
"name": "isPageHeading",
990+
"type": "boolean",
991+
"description": "Legend rendered as page heading"
992+
},
993+
{
994+
"name": "legendSize",
995+
"type": "\"xl\"|\"l\"|\"m\"|\"s\"",
996+
"description": "Legend size"
997+
},
998+
{
999+
"name": "hint",
1000+
"type": "string",
1001+
"description": "Group hint text"
1002+
},
1003+
{
1004+
"name": "errorMessage",
1005+
"type": "string",
1006+
"description": "Group error message"
1007+
},
1008+
{
1009+
"name": "className",
1010+
"type": "string",
1011+
"description": "Extra wrapper classes"
1012+
},
1013+
{
1014+
"name": "small",
1015+
"type": "boolean",
1016+
"description": "Small variant"
1017+
}
1018+
],
1019+
"source": "src/components/Checkboxes/Checkboxes.schema.ts"
1020+
},
10211021
"Button": {
10221022
"name": "Button",
10231023
"category": "form",
@@ -1139,8 +1139,8 @@
11391139
"Hint"
11401140
],
11411141
"uncategorised": [
1142-
"Checkboxes",
1143-
"CharacterCount"
1142+
"CharacterCount",
1143+
"Checkboxes"
11441144
]
11451145
}
11461146
}

‎src/components/Header/Header.scss‎

Lines changed: 0 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -153,8 +153,6 @@ $header-vertical-pad-tablet: tokens.$nhs-fdp-spacing-4;
153153
&__navigation-container {
154154
margin: 0 auto;
155155
position: relative;
156-
/* Default reserve for More button space (0 by default; can be overridden) */
157-
--nhs-header-more-reserve: 0px;
158156
// Use inset so the hairline renders inside the element rather than outside (the previous
159157
// 0 -1px offset was drawing the line just above the box and it could be obscured by the
160158
// preceding header content). Inset ensures consistent visibility.
@@ -177,8 +175,6 @@ $header-vertical-pad-tablet: tokens.$nhs-fdp-spacing-4;
177175
// Prevent layout shift during initialization with subtle opacity transition
178176
&--initializing {
179177
transition: opacity #{tokens.$nhs-fdp-animation-duration-fast} ease-in-out;
180-
/* During init, conservatively reserve space for the More button to avoid shifts */
181-
--nhs-header-more-reserve: var(--fdp-header-more-reserve, 104px);
182178
}
183179

184180
// Ensure smooth transition when initialization completes
@@ -461,13 +457,6 @@ $header-vertical-pad-tablet: tokens.$nhs-fdp-spacing-4;
461457
padding: 0;
462458
width: calc(100% + #{tokens.$nhs-fdp-spacing-4});
463459

464-
/* Flex spacer to reserve space for potential More button */
465-
&::after {
466-
content: "";
467-
flex: 0 0 var(--nhs-header-more-reserve, 0px);
468-
inline-size: var(--nhs-header-more-reserve, 0px);
469-
block-size: 1px; /* minimal size to avoid affecting line-height */
470-
}
471460

472461
@media (min-width: tokens.$nhs-fdp-breakpoint-medium) {
473462
width: calc(100% + #{tokens.$nhs-fdp-spacing-6});

‎src/components/Header/Header.ssr.scss‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -40,8 +40,6 @@ nav[data-ssr-hydrating="true"] {
4040

4141
/* SSR Fallback Navigation Container */
4242
.nhsuk-header__navigation-container--ssr {
43-
/* Reserve space for potential More button to avoid layout shift on hydration */
44-
--nhs-header-more-reserve: var(--fdp-header-more-reserve, 104px);
4543
/* Server-side: start as single line; overflow handled via progressive enhancement */
4644
.nhsuk-header__navigation-list {
4745
display: flex;

‎src/components/Header/Header.tsx‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -117,10 +117,6 @@ export const Header: React.FC<HeaderProps> = ({
117117

118118
const nextShow = fit < navigation.items.length;
119119
const nextVisible = nextShow ? fit : navigation.items.length;
120-
// Set CSS reserve to measured width if More will be shown, otherwise remove reserve
121-
try {
122-
container.style.setProperty('--nhs-header-more-reserve', nextShow ? `${reserve}px` : '0px');
123-
} catch {}
124120
// Only update state if changed to avoid extra observer cycles & flicker
125121
setShowMoreButton(prev => (prev === nextShow ? prev : nextShow));
126122
setVisibleItems(prev => (prev === nextVisible ? prev : nextVisible));

0 commit comments

Comments
 (0)