@lavalogic/scoria 0.36.0 → 0.37.1

package/dist/scss/_mixins.scss

@@ -1357,9 +1357,44 @@
 }
 
 @mixin table-column-highlight {
-	td {
+	// Outer leaf-cell content inside the highlight wrapper. Needs an
+	// explicit height because the cell wrapper (`.cell.highlight-cell`)
+	// uses CSS Grid with auto-row sizing, so without a stated height
+	// the outer div collapses to zero and the absolute-positioned
+	// `.wrapper` inside has no parent box to fill.
+	//
+	// Row-border (`border-bottom`) lets the horizontal row dividers
+	// run continuously from the table's left edge across the highlight
+	// column into the rest of the row.
+	.highlight-content {
 		position: relative;
 		padding: 0;
+		width: 100%;
+		// `height: 100%` makes the highlight content fill its grid
+		// item (the `.cell.highlight-cell` wrapper), which the grid
+		// stretches to the row's actual height. Using an explicit
+		// `var(--height, 3rem)` here would lock the highlight cell to
+		// 3rem regardless of how tall the row actually became from
+		// data cells, which is what produced a 1px offset whenever
+		// the row was taller than 3rem.
+		// The `min-height` is a safety net for the edge case where
+		// other cells collapse and the row would otherwise become 0.
+		height: 100%;
+		min-height: var(--height, 3rem);
+		box-sizing: border-box;
+		// `border-right` provides the column separator between the
+		// highlight column and the first pinned-left data column.
+		// Every other leaf cell already paints its own border-right
+		// via `table-cell-basic`, so the highlight column was the
+		// only spot in the row where the vertical separator was
+		// missing - visible as a blank edge whenever a column was
+		// pinned to the left.
+		border-right: solid 1px colours.$ui-blue-4;
+		// Single `border-bottom` matches the data leaf cells (which
+		// now also emit only `border-right + border-bottom` via
+		// `table-cell-basic`), so each row boundary is a uniform 1px
+		// line across the whole row.
+		border-bottom: solid 1px colours.$ui-blue-4;
 	}
 
 	div.wrapper {
@@ -1543,8 +1578,30 @@
 	}
 }
 
+// Cell-level mixin set. Each leaf cell component (TableCheckbox,
+// TableTextInput, etc.) includes the subset it needs; the rules get
+// emitted scoped to that component's template, which is how the
+// styling actually attaches to the leaf cell's outer div. The wrapper
+// `<div role="cell" class="cell">` rendered by TableRow / TableHead /
+// TableBody carries only sticky-pinning and layout-shell styling,
+// defined separately on `.cell` below.
+
 @mixin table-cell-basic {
-	td {
+	// Leaf cell box-level styling. The selector list covers every
+	// root class a leaf cell can have; Svelte's per-component scoping
+	// keeps each rule local to the file that includes this mixin.
+	//
+	// Each leaf cell renders only `border-right` + `border-bottom`. The
+	// top and left edges are handled by the previous row's bottom
+	// border and the previous cell's right border respectively, so
+	// adjacent cells share a single 1px line. Doing top + bottom would
+	// produce a stacked 2px line at every row boundary which read as
+	// "two borders" visually.
+	.focusable,
+	.checkbox-cell,
+	.input-cell,
+	.select-cell,
+	.datepicker-cell {
 		@include table-height-transition;
 		--input-border: none;
 		--input-height: var(--height);
@@ -1554,13 +1611,30 @@
 		position: relative;
 		padding-left: 0.75rem;
 		padding-right: 0.75rem;
-		border: solid 1px colours.$ui-blue-4;
-		border-left: none;
+		border-right: solid 1px colours.$ui-blue-4;
+		border-bottom: solid 1px colours.$ui-blue-4;
+		box-sizing: border-box;
+		width: 100%;
+		// `height: var(--height)` (was `100%`) so every leaf cell
+		// gets exactly the same total rendered height regardless of
+		// whether its component also includes `table-cell-display`.
+		// With `100%` the input-style leaf cells stretched to the
+		// row track that was being determined by the display cells'
+		// explicit `var(--height)` + sub-pixel rounding from text
+		// content's `line-height`, which left input cells 1px taller
+		// than display cells (FocusableImmutableCell, ExpandCell,
+		// BubbleCell, etc.) - the visible symptom was the display
+		// cells' bottom borders sitting 1px above the row's actual
+		// bottom edge.
+		height: var(--height);
 	}
 }
 
 @mixin table-cell-multifocus {
-	td {
+	.focusable,
+	.checkbox-cell,
+	.input-cell,
+	.select-cell {
 		&.multifocus {
 			background-color: var(--multifocus-colour, colours.$primary-blue-2);
 
@@ -1572,20 +1646,21 @@
 }
 
 @mixin table-cell-focusable {
-	td {
-		&.focusable {
-			user-select: none;
-			cursor: default;
-			outline: none;
-			&.editable {
-				cursor: pointer;
-			}
+	.focusable {
+		user-select: none;
+		cursor: default;
+		outline: none;
+		&.editable {
+			cursor: pointer;
 		}
 	}
 }
 
 @mixin table-cell-validity {
-	td {
+	.focusable,
+	.checkbox-cell,
+	.input-cell,
+	.select-cell {
 		&.info {
 			background-color: #{colours.$brand-dark};
 		}
@@ -1601,10 +1676,23 @@
 }
 
 @mixin table-cell-display {
-	td {
+	.focusable,
+	.checkbox-cell,
+	.input-cell,
+	.select-cell {
 		max-height: var(--max-height);
 		height: var(--height);
-		box-sizing: content-box;
+		// `border-box` (was `content-box`) so the leaf cell's total
+		// rendered size equals --height including its 1px border-bottom.
+		// With `content-box`, display cells (FocusableImmutableCell,
+		// BubbleCell, etc.) rendered 1px taller than input-style leaf
+		// cells (TableTextInput, TableNumberInput, ...) which never
+		// include this mixin and use `border-box` from
+		// `table-cell-basic`. The 1px gap shifted row dividers
+		// between adjacent display and text columns and was the cause
+		// of the misalignment reported on the `Name` (text) column
+		// rows next to the `ID` (display) column rows.
+		box-sizing: border-box;
 		overflow-x: clip;
 		--td-padding-left: 0;
 		--td-padding-right: 0;
@@ -1633,18 +1721,12 @@
 }
 
 @mixin table-cell-svelecte {
-	td {
-		&.select-cell {
-			padding: unset;
-			box-sizing: border-box;
-			vertical-align: middle;
-
-			text-align: center;
-		}
-	}
-
-	td {
+	.select-cell {
+		padding: unset;
+		box-sizing: border-box;
+		text-align: center;
 		--sv-border: none;
+
 		:global(.select-wrapper) {
 			--sv-min-height: 0px;
 			--sv-general-padding: 0px;
@@ -1659,119 +1741,103 @@
 	@include table-cell-focusable;
 	@include table-cell-validity;
 
-	td {
-		&.invalid {
-			background-color: colours.$error-background !important;
-		}
+	.invalid {
+		background-color: colours.$error-background !important;
+	}
 
-		&.focusable.focus {
-			user-select: none;
-			cursor: default;
-			outline: none;
-		}
+	.focusable.focus {
+		user-select: none;
+		cursor: default;
+		outline: none;
+	}
+
+	.input-cell,
+	.select-cell,
+	.datepicker-cell {
+		padding: unset;
+		box-sizing: border-box;
 
-		&.input-cell,
-		&.select-cell,
-		&.datepicker-cell {
-			padding: unset;
+		.react-datepicker-wrapper {
+			width: 100%;
 			box-sizing: border-box;
-			vertical-align: middle;
+			display: flex;
+			justify-content: center;
 
-			.react-datepicker-wrapper {
+			.react-datepicker__input-container {
 				width: 100%;
-				box-sizing: border-box;
 				display: flex;
 				justify-content: center;
-
-				.react-datepicker__input-container {
-					width: 100%;
-					// width: calc(100% - 2px);
-					display: flex;
-					justify-content: center;
-					box-sizing: border-box;
-				}
-
-				input {
-					width: 100%;
-					border: none;
-					outline: none;
-					box-shadow: basics.$table-focus;
-					box-sizing: border-box;
-					border-radius: 0;
-					line-height: 1.5;
-					font-size: inherit;
-					font-family: inherit;
-					padding: 0.8rem 0.75rem;
-				}
+				box-sizing: border-box;
 			}
 
-			.select {
+			input {
 				width: 100%;
-
-				input {
-					padding: 0.8rem 0.75rem;
-					border-radius: 0;
-					width: 100%;
-					border: none;
-					outline: none;
-					box-shadow: basics.$table-focus;
-				}
+				border: none;
+				outline: none;
+				box-shadow: basics.$table-focus;
+				box-sizing: border-box;
+				border-radius: 0;
+				line-height: 1.5;
+				font-size: inherit;
+				font-family: inherit;
+				padding: 0.8rem 0.75rem;
 			}
 		}
 
-		.stretch {
-			display: flex;
-			// position: absolute;
-			// top: 0;
-			// bottom: 0;
-			// left: 0;
-			// right: 0;
-		}
-
-		&.checkbox-cell {
-			box-sizing: content-box;
-			height: var(--height);
-
-			& * {
-				outline-color: colours.$transparent-20;
-				// transition: outline-color transitions.$ease;
-				&.focus-within {
-					outline: solid 1px colours.$brand-primary;
-				}
-			}
-
-			// & .checkbox__icn {
-			//   transition: all transitions.$ease;
-			// }
-		}
+		.select {
+			width: 100%;
 
-		&.select-cell {
 			input {
+				padding: 0.8rem 0.75rem;
+				border-radius: 0;
 				width: 100%;
-				// width: calc(100% - 2px);
+				border: none;
+				outline: none;
+				box-shadow: basics.$table-focus;
 			}
 		}
+	}
 
-		&.checkbox-cell,
-		&.select-cell {
-			text-align: center;
+	.stretch {
+		display: flex;
+	}
+
+	.checkbox-cell {
+		box-sizing: content-box;
+		height: var(--height);
+
+		& * {
+			outline-color: colours.$transparent-20;
+			&.focus-within {
+				outline: solid 1px colours.$brand-primary;
+			}
 		}
+	}
 
-		.input-container {
+	.select-cell {
+		input {
 			width: 100%;
-			// width: calc(100% - 2px);
+		}
+	}
 
-			input {
-				width: 100%;
-				box-sizing: border-box;
-				border-radius: 0;
+	.checkbox-cell,
+	.select-cell {
+		text-align: center;
+	}
 
-				font-size: inherit;
+	.input-container {
+		width: 100%;
 
-				&:focus {
-					outline: none;
-					box-shadow: basics.$table-focus;
-				}
+		input {
+			width: 100%;
+			box-sizing: border-box;
+			border-radius: 0;
+
+			font-size: inherit;
+
+			&:focus {
+				outline: none;
+				box-shadow: basics.$table-focus;
 			}
 		}
 	}
@@ -1788,7 +1854,7 @@
 		width: 100%;
 		justify-content: space-around;
 	}
-	td {
+	div.input-cell {
 		background-color: colours.$ui-blue-1;
 		height: var(--height);
 		overflow: visible;
@@ -1872,12 +1938,9 @@
 }
 
 @mixin table-cell-input-basic {
-	td {
-		&.input-cell {
-			padding: unset;
-			box-sizing: border-box;
-			vertical-align: middle;
-		}
+	.input-cell {
+		padding: unset;
+		box-sizing: border-box;
 	}
 }
 
@@ -1947,22 +2010,114 @@
 	}
 }
 
+// Cell-wrapper layout. The wrapper `<div role="cell" class="cell">`
+// rendered by TableRow / TableHead / TableBody is the grid item that
+// carries sticky-pinning offsets; the visible cell content lives in
+// the leaf cell inside (see the table-cell-* mixins above which the
+// leaf cell components include).
+//
+// Pinned-left and pinned-right cells additionally get a coloured
+// boundary line and a directional drop shadow. The shadow only
+// projects beyond the pin (right for pinned-left, left for
+// pinned-right); for an interior pinned cell the next pinned cell's
+// opaque background covers the shadow, so only the OUTERMOST pinned
+// cell on each side shows its shadow over the centre region. That
+// gives the visual "pinned columns are floating above the rest"
+// without per-cell special-casing.
+@mixin table-cell-wrapper {
+	.cell {
+		display: block;
+		position: relative;
+		min-width: 0;
+		// `overflow: visible` so absolutely positioned popups inside
+		// the cell (e.g. the quick-search filter dropdown, the actions
+		// cell context menu) can render outside the cell's box.
+		// Cell-internal text overflow is still clipped because the
+		// leaf cells inside use `overflow-x: clip` from
+		// table-cell-basic.
+		overflow: visible;
+		box-sizing: border-box;
+
+		&.pinned-left,
+		&.pinned-right {
+			position: sticky;
+			z-index: 2;
+			background-color: colours.$ui-white;
+		}
+
+		// Pinned-column boundary is drawn by the leaf cell's
+		// border-right / border-left (set in `table-cell-basic`),
+		// matching the rest of the column. The wrapper only adds the
+		// directional drop shadow so the pinned column visually
+		// floats above the scrolling content. Putting `border-right`
+		// here too would stack with the leaf cell's border-right and
+		// produce a 2px line that sits 1px to the left of the
+		// header's single 1px border line, which is what was making
+		// the header column-border look offset.
+		&.pinned-left {
+			box-shadow: 2px 0 4px rgba(0, 0, 0, 0.08);
+		}
+
+		&.pinned-right {
+			box-shadow: -2px 0 4px rgba(0, 0, 0, 0.08);
+		}
+	}
+}
+
 @mixin table-head {
-	th {
+	.cell.header {
 		position: relative;
-		min-width: fit-content;
+		// `min-width: 0` (was `fit-content`) so the header cell
+		// always tracks the column's grid track width. With
+		// `fit-content`, a header cell whose content (text + sort
+		// icon) was wider than a narrow user-resized track would
+		// overflow the track, pushing the resize handle out into the
+		// next column's track area where it became visually unreachable
+		// (covered by the next column's content) and could not be
+		// dragged back. The `overflow: hidden` on `.header` keeps the
+		// header text clipped to the track without leaking outwards
+		// so the rightmost 6px stay reserved for the resize handle.
+		min-width: 0;
 		color: colours.$ui-black;
-		border: solid 1px colours.$ui-blue-4;
+		// Match the data leaf cells: only border-right + border-bottom.
+		// The previous `border: solid 1px` shorthand added a left
+		// border which shifted the header content 1px right relative
+		// to the filter / body cells in the same column.
+		border-right: solid 1px colours.$ui-blue-4;
+		border-bottom: solid 1px colours.$ui-blue-4;
 	}
 }
 
-@mixin table-row-basic {
-	tr {
+// Grid layout for every `.datatable-row`. This rule must emit from
+// every component that actually renders the class (TableRow, TableHead,
+// TableBody), because Svelte 5 scopes CSS per-component and a rule
+// emitted by one component does not match elements rendered by
+// siblings. Without this mixin, header rows and the quick-filter row
+// fall back to `display: block` and each cell stacks vertically.
+@mixin table-row-grid {
+	.datatable-row {
+		display: grid;
+		grid-template-columns: var(--cols);
 		line-height: var(--line-height, 3);
 		@include table-height-transition;
-		background-color: colours.$ui-white;
+	}
+}
+
+@mixin table-row-basic {
+	@include table-row-grid;
 
-		td.no-padding {
+	.datatable-row {
+		background-color: colours.$ui-white;
+		// `scroll-margin` keeps keyboard arrow navigation (`scrollIntoView`)
+		// honest about the sticky bars above and below. Without it, scrolling
+		// to a row at the top of the viewport leaves it hidden behind the
+		// header / filter; below, the footer covers the bottom rows. The top
+		// offset includes the filter row's 61px when `.quick-filtering` is
+		// on; the bottom offset matches the footer's intrinsic height.
+		scroll-margin-top: 3rem;
+		scroll-margin-bottom: 3rem;
+
+		& > .cell.no-padding {
 			padding: 0;
 		}
 
@@ -1975,21 +2130,77 @@
 			background-color: colours.$primary-blue-2;
 		}
 	}
+
+	:global(.datatable.quick-filtering) .datatable-row {
+		scroll-margin-top: calc(3rem + 61px);
+	}
+
+	// Pinned cells carry an opaque `background-color: $ui-white` from
+	// `table-cell-wrapper` so scrolled content does not bleed through
+	// during horizontal scroll. That opacity also masks the row's
+	// hover / highlight / alt backgrounds; the rules below re-apply
+	// the row's state colour to the pinned cells so the whole row
+	// (including pinned columns) highlights as a unit.
+	.datatable-row.alt > .cell.pinned-left,
+	.datatable-row.alt > .cell.pinned-right {
+		background-color: colours.$ui-blue-1;
+	}
+
+	.datatable-row.highlighted > .cell.pinned-left,
+	.datatable-row.highlighted > .cell.pinned-right,
+	.datatable-row.hoverable:hover > .cell.pinned-left,
+	.datatable-row.hoverable:hover > .cell.pinned-right {
+		background-color: colours.$primary-blue-2;
+	}
+}
+
+// Sticky-positioned header row plus the top-corner z-index bump so
+// pinned-left / pinned-right header cells stack above the sticky pinned
+// body cells. Include only in TableHead.
+@mixin table-header-sticky {
+	.datatable-row.header-row {
+		position: sticky;
+		top: 0;
+		// z-index 10 sits above the nested-table sticky panel
+		// (z-index 3 in NestedTable.svelte) and well clear of body
+		// pinned cells (z 2). Matches the quick-filter row in
+		// `TableBody.svelte` so the two sticky strips at the top
+		// share a single stacking layer.
+		z-index: 10;
+		// Row-level background so the header strip stays opaque past
+		// the last column. Without it, only the individual header
+		// cells were white and the area to the right of the last
+		// column (when the grid does not fill the container, or when
+		// scrolled horizontally past the right edge) fell back to the
+		// table-wrapper's grey background.
+		background-color: colours.$ui-white;
+		// Soft downward drop shadow so users can see body content is
+		// scrolling underneath the sticky header. The opacity is
+		// gated by `--show-top-shadow`, a 0/1 CSS variable set on
+		// `.grid` in Table.svelte from the window-scroll listener;
+		// the shadow only appears when there's actually content
+		// scrolled above the header.
+		box-shadow: 0 2px 4px rgba(0, 0, 0, calc(0.08 * var(--show-top-shadow, 0)));
+
+		& > .cell.pinned-left,
+		& > .cell.pinned-right {
+			// Bumped to 11 in lockstep with the header row going to 10.
+			z-index: 11;
+		}
+	}
 }
 
 @mixin table-row-no-hover {
-	tr {
+	.datatable-row {
 		line-height: var(--line-height, 3);
 
-		th {
+		& > .cell.header {
 			border-top: none;
 			border-bottom: none;
 			&:first-of-type {
-				// border-top-left-radius: sizing.$border-radius;
 				border-left: none;
 			}
 			&:last-of-type {
-				// border-top-right-radius: sizing.$border-radius;
 				border-right: none;
 			}
 		}
@@ -1998,7 +2209,7 @@
 
 @mixin table-row {
 	@include table-row-no-hover;
-	tr {
+	.datatable-row {
 		&.hovered {
 			background-color: colours.$ui-blue-1;
 		}
@@ -2350,6 +2561,69 @@
 	}
 }
 
+// Shared structure for the table's side-panel sections (Advanced
+// Filter, Modify Columns, Settings). Every panel is laid out as a
+// vertical stack of an optional header (`.side-panel-header`), a
+// scrollable body (`.side-panel-body`), and an optional footer
+// (`.side-panel-footer`). The mixin centralises the title typography,
+// the section borders and the body / footer padding so the three
+// panels look identical from the outside even though their contents
+// differ. Include in any component that renders one of those panels.
+@mixin side-panel-section {
+	.side-panel-section {
+		display: flex;
+		flex-flow: column nowrap;
+		height: 100%;
+		width: 100%;
+		background-color: colours.$ui-white;
+		box-sizing: border-box;
+		min-height: 0;
+	}
+
+	.side-panel-header {
+		flex-shrink: 0;
+		padding: 1.25rem 1.25rem 0.875rem;
+		border-bottom: solid 1px colours.$ui-blue-4;
+		background-color: colours.$ui-white;
+		display: flex;
+		flex-flow: row nowrap;
+		align-items: center;
+		justify-content: space-between;
+		gap: 0.75rem;
+
+		h2 {
+			margin: 0;
+			font-size: sizing.$text-medium-large;
+			font-weight: 600;
+			color: colours.$font-primary;
+			line-height: 1.25;
+		}
+	}
+
+	.side-panel-body {
+		flex: 1 1 auto;
+		min-height: 0;
+		display: flex;
+		flex-flow: column nowrap;
+		gap: 0.75rem;
+		padding: 1rem 1.25rem;
+		overflow-y: auto;
+		box-sizing: border-box;
+	}
+
+	.side-panel-footer {
+		flex-shrink: 0;
+		padding: 0.875rem 1.25rem;
+		border-top: solid 1px colours.$ui-blue-4;
+		background-color: colours.$ui-white;
+		display: flex;
+		flex-flow: row nowrap;
+		gap: 0.75rem;
+		align-items: center;
+		box-sizing: border-box;
+	}
+}
+
 @mixin select {
 	.select-wrapper {
 		// --input-width: #{sizing.$input-width};
@@ -2425,19 +2699,6 @@
 			box-sizing: border-box;
 		}
 
-		:global(.sv-item--content) {
-			font-size: #{sizing.$text-small-small-medium};
-		}
-
-		:global(.sv-item--wrap.in-dropdown) {
-			cursor: pointer;
-			min-height: 40px;
-			align-items: center;
-		}
-		:global(.sv-item--content) {
-			min-height: 1.2rem;
-		}
-
 		:global(.sv-btn-indicator) {
 			cursor: pointer;
 		}
@@ -2445,10 +2706,18 @@
 			--sv-border: none;
 		}
 
-		.select-wrapper.force-upwards {
+		// `forceUpwards` flips the dropdown so it anchors against the
+		// wrapper's top edge. The `dropdownPortal` helper handles
+		// auto-flip generically (the dropdown is teleported to
+		// `document.body` and positioned with `position: fixed`), so
+		// this rule only fires when a consumer explicitly passes
+		// `forceUpwards={true}` *and* the portal happens to be
+		// inactive (which is currently impossible, but the rule is
+		// retained for compatibility with any future call site that
+		// disables the portal).
+		&.force-upwards {
 			:global {
 				.sv_dropdown.is-open {
-					// position: fixed !important;
 					bottom: var(--dropdown-bottom);
 				}
 			}
@@ -2475,15 +2744,6 @@
 				cursor: pointer;
 			}
 
-			.sv-item--wrap.in-dropdown {
-				cursor: pointer;
-				min-height: 40px;
-				align-items: center;
-			}
-			.sv-item--content {
-				min-height: 1.2rem;
-			}
-
 			span {
 				transition: transitions.$colours;
 			}
@@ -2491,10 +2751,6 @@
 			.sv-control {
 				transition: transitions.$colours;
 			}
-
-			div.sv_dropdown.is-open {
-				z-index: 99;
-			}
 		}
 
 		div.nothing {
@@ -2502,12 +2758,8 @@
 			width: 0;
 		}
 
-		.dropdown-item,
 		.selection {
 			font-size: #{sizing.$text-small-small-medium};
-		}
-
-		.selection {
 			padding-left: 0.5rem;
 			white-space: nowrap;
 			display: flex;
@@ -2535,13 +2787,45 @@
 		box-sizing: border-box;
 	}
 
-	.dropdown-item {
+	// Dropdown-internal rules. Lifted out of the `.select-wrapper`
+	// scope because the `dropdownPortal` helper teleports
+	// `.sv_dropdown` to `document.body` while open, so any rule that
+	// requires `.select-wrapper` as an ancestor stops applying. The
+	// `:global` wrapper escapes Svelte's component-scoping (which
+	// would otherwise restrict the selector to descendants of this
+	// component's render tree, ruling out the teleported dropdown).
+	:global {
+		.sv-item--wrap.in-dropdown {
+			cursor: pointer;
+			min-height: 40px;
+			align-items: center;
+		}
+
+		.sv-item--content {
+			font-size: #{sizing.$text-small-small-medium};
+			min-height: 1.2rem;
+		}
+
+		div.sv_dropdown.is-open {
+			z-index: 99;
+		}
+	}
+
+	// The option snippet renders `<span class="dropdown-item">...`
+	// inside the dropdown. The dropdown is teleported on open, so
+	// this rule (Svelte-scoped to the host component) only matches
+	// when the snippet is inside the original parent. Tagging the
+	// inner selector with `:global` ensures the rule applies to the
+	// teleported `.dropdown-item` too, because the Svelte hash class
+	// stays on the element regardless of where it lives in the DOM.
+	:global(.dropdown-item) {
 		display: flex;
 		flex-flow: row nowrap;
 		width: 100%;
 		overflow: hidden;
 		text-overflow: ellipsis;
 		gap: 1rem;
+		font-size: #{sizing.$text-small-small-medium};
 		fill: colours.$brand-primary;
 
 		.toggle-icon {