fix(a11y): size and centre the field label info icon

The design puts the info icon at 20x20 beside the label; ours asked for 12,
and since info-outlined draws its circle across 20 of a 24 viewBox that
rendered a 10px target. It is 16 now.

It also sat 2px above the text. .control-label is display: block, so the
tooltip's inline-flex wrapper took part in inline layout, and an
inline-flex box whose only child is a replaced element baselines on its
bottom margin edge rather than its content. The svg { vertical-align:
bottom } rule alongside it cannot correct that: vertical-align is ignored
on flex items.

Laying the label out as a centred flex row puts the icon dead on the text
centre. vertical-align: middle was the other candidate and overshoots by
1.3px, aligning to half the x-height rather than the cap centre.

That goes on FieldLabel's own element, not on .control-label. Nine
hand-written labels across six other files carry that class, none of them
with an icon to align, so they keep display: block and this touches only
what FieldLabel renders. The stylesheet is unchanged.

Checked against block: the label keeps its full width, and a long label
still wraps to the same height.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

Author: talissoncosta

frontend/.storybook/preview.js

@@ -61,8 +61,6 @@ window.Row = Row
 window.FormGroup = FormGroup
 // isMobile is set at app boot; stub it so components that read it render in Storybook.
 window.isMobile = false
-// toast() is registered at app boot by project-components.js. Stub it so
-// components that fire one on interaction (ValueEditor's copy) don't throw.
 window.toast = (message) => console.log('[toast]', message)
 
 /** @type { import('storybook').Preview } */

frontend/documentation/components/ValueEditor.stories.tsx

@@ -13,8 +13,6 @@ export default meta
 
 type Story = StoryObj
 
-// The real call sites always pass a tooltip, so the stories do too: without
-// one the label renders without the info icon the design shows.
 const DEFAULT_TOOLTIP = Constants.strings.REMOTE_CONFIG_DESCRIPTION
 
 const Interactive = ({
@@ -32,9 +30,6 @@ const Interactive = ({
   )
 }
 
-// Empty state. The "Enter a value..." text is not a real ::placeholder — it is
-// rendered into the contenteditable and styled by `code.txt.empty`, which reads
-// --color-text-tertiary, the same token every ::placeholder uses.
 export const Default: Story = {
   render: () => <Interactive label='Value' />,
 }
@@ -43,8 +38,6 @@ export const WithValue: Story = {
   render: () => <Interactive label='Value' initialValue='DEFAULT_VALUE' />,
 }
 
-// Copy is pinned to the first line rather than centred, so it stays put as the
-// editor grows, and the value keeps clear of it.
 export const Multiline: Story = {
   render: () => (
     <Interactive
@@ -66,14 +59,12 @@ export const Json: Story = {
   ),
 }
 
-// Invalid JSON surfaces a warning against the active language label.
 export const InvalidJson: Story = {
   render: () => (
     <Interactive label='Value' language='json' initialValue='{ "colour": ' />
   ),
 }
 
-// The size used for multivariate variation values, matching adjacent inputs.
 export const CodeMedium: Story = {
   render: () => (
     <Interactive
@@ -85,15 +76,12 @@ export const CodeMedium: Story = {
   ),
 }
 
-// Read-only display (MV control/override values). The language row and copy are
-// both hidden, which is existing behaviour rather than a decision.
 export const Disabled: Story = {
   render: () => (
     <Interactive label='Control value' disabled initialValue='DEFAULT_VALUE' />
   ),
 }
 
-// The SAML metadata field pins the language and hides the whole row.
 export const OnlyOneLang: Story = {
   render: () => (
     <Interactive

frontend/web/components/ValueEditor.js

@@ -91,10 +91,6 @@ class Validation extends Component {
   render() {
     const displayLanguage =
       this.props.language === 'ini' ? 'toml' : this.props.language
-    // Icon forwards className for only a handful of its cases, so the colour
-    // class goes on a wrapper and the icon inherits through currentColor.
-    // saveFeatureWithValidation reads the error id off the DOM to decide
-    // whether to warn before saving, so both ids stay.
     return this.state.error ? (
       <Tooltip
         title={
@@ -154,8 +150,6 @@ class ValueEditor extends Component {
 
   render() {
     const { ...rest } = this.props
-    // Copy used to be the last item of the language row, so hiding that row
-    // hid copy too. It now lives inside the editor, so repeat the conditions.
     const showCopy = !this.props.onlyOneLang && !this.props.disabled
     return (
       <div

frontend/web/components/base/forms/FieldLabel.tsx

@@ -27,7 +27,11 @@ const FieldLabel: FC<FieldLabelProps> = ({
   tooltip,
   tooltipPlace = 'top',
 }) => (
-  <label id={id} htmlFor={htmlFor} className={cn('control-label', className)}>
+  <label
+    id={id}
+    htmlFor={htmlFor}
+    className={cn('control-label d-flex align-items-center', className)}
+  >
     {children}
     {required && (
       <span className='text-danger ml-1' aria-hidden>
@@ -36,7 +40,7 @@ const FieldLabel: FC<FieldLabelProps> = ({
     )}
     {tooltip && (
       <Tooltip
-        title={<Icon name='info-outlined' width={12} height={12} />}
+        title={<Icon name='info-outlined' width={16} height={16} />}
         place={tooltipPlace}
         titleClassName='cursor-pointer ml-1 d-inline-flex align-items-center'
       >

frontend/web/styles/3rdParty/_hljs.scss

@@ -48,8 +48,6 @@
     }
   }
 
-  // Copy sits inside the editor, pinned to the first line rather than centred:
-  // the editor grows with multi-line values.
   .value-editor__copy {
     position: absolute;
     top: 18px;
@@ -63,7 +61,6 @@
     }
   }
 
-  // Keep long values clear of the copy button.
   &:has(.value-editor__copy) .hljs {
     padding-right: 44px;
   }