@autobusal/common 1.25.0 → 1.25.1

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # Changelog
 
+## 1.25.1
+
+**The SEO override wears the site's own form clothes.**
+
+`SeoOverride` declared its own `Field`/`Label`/`Input`/`Textarea` and restated the global field styling with *different* values — transparent instead of `inputs.background`, a primary-coloured border, its own font size — then sat on the bare page rather than a card. On a country or city screen that made the two SEO fields the only ones on screen not matching the form directly beneath them, which is the opposite of what its own comment claimed.
+
+It uses `.box` and `.row` now, the site's own card and field classes, with plain inputs so `GlobalStyles` reaches them exactly as it reaches every `Viewer` row. Being controlled is the only thing that genuinely differs from a Viewer row, and that is a state concern, not a visual one. The textarea keeps a single rule, for height: `GlobalStyles` gives every text input 38px, right for one line and useless for a description.
+
+Reaches the label SEO tab too, which had the same problem. Checked it does not land inside another card — `admin-label`'s `Options` is the tab strip, not a wrapper around the tab bodies.
+
 ## 1.25.0
 
 **New `setDepartureZone(zone)` — the date picker floors on today WHERE THE COACH LEAVES.**

package/SeoOverride/SeoOverride.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import { TFunction } from 'i18next';
-import { ContainerLocales, LocaleButton, Notice, Field, Label, Input, Textarea } from './styles';
+import { Container, ContainerLocales, LocaleButton, Notice, Textarea } from './styles';
 import { useGetSettings } from '@autobusal/providers/services';
 
 export interface SeoEntry {
@@ -70,8 +70,15 @@ const SeoOverride = ({ value, t, onChange }: Props): JSX.Element => {
     return !!(entry?.title?.trim() || entry?.description?.trim());
   };
 
+  // Edited: Ferjolt Ozuni - Date: 2026-08-05
+  // `.box` and `.row` are the site's own card and field classes, and the
+  // inputs are left plain so GlobalStyles reaches them - the same shape
+  // Viewer/Item renders. Being controlled is the only way this differs from
+  // a Viewer row, and that is a state concern, not a visual one; styling
+  // them separately is what made the two SEO fields the odd ones out on
+  // every country and city screen.
   return (
-    <>
+    <Container className="box">
       <ContainerLocales>
         { available.map(language => (
           <LocaleButton
@@ -88,27 +95,27 @@ const SeoOverride = ({ value, t, onChange }: Props): JSX.Element => {
 
       <Notice>{ t('seo_override.notice', { ns: 'common' }) }</Notice>
 
-      <Field>
-        <Label>{ t('seo_override.title', { ns: 'common' }) }</Label>
+      <div className="row">
+        { t('seo_override.title', { ns: 'common' }) }
 
-        <Input
+        <input
           type="text"
           maxLength={ 250 }
           value={ current.title ?? '' }
           onChange={ (event) => update('title', event.target.value) }
         />
-      </Field>
+      </div>
 
-      <Field>
-        <Label>{ t('seo_override.description', { ns: 'common' }) }</Label>
+      <div className="row row-nomargin">
+        { t('seo_override.description', { ns: 'common' }) }
 
         <Textarea
           maxLength={ 500 }
           value={ current.description ?? '' }
           onChange={ (event) => update('description', event.target.value) }
         />
-      </Field>
-    </>
+      </div>
+    </Container>
   );
 };
 

package/SeoOverride/styles.ts

@@ -1,5 +1,20 @@
 import styled, { css } from 'styled-components';
 
+/**
+ * The editor's own card.
+ *
+ * Ferjolt Ozuni - Date: 2026-08-05
+ * `.box` is the site's card surface (GlobalStyles), the same one Viewer
+ * draws itself on. This block sits directly above a Viewer on the country
+ * and city screens, so on the bare page background it read as loose
+ * furniture that happened to be above the form rather than part of it -
+ * which is exactly backwards, since the form's Save button is what submits
+ * these fields.
+ */
+export const Container = styled.div`
+  margin-bottom: 20px;
+`;
+
 export const ContainerLocales = styled.div`
   display: flex;
   flex-wrap: wrap;
@@ -47,42 +62,20 @@ export const Notice = styled.p`
 `;
 
 /**
- * The editor's own fields, rather than Viewer rows.
+ * Height, and nothing else.
  *
- * Ferjolt Ozuni - Date: 2026-08-02
- * Viewer's inputs are uncontrolled (defaultValue + a react-hook-form ref),
- * which cannot hold thirteen languages' worth of state while showing one -
- * switching language would discard whatever had just been typed. These are
- * controlled, and styled to match the rows they sit among.
+ * Ferjolt Ozuni - Date: 2026-08-05
+ * How a field looks - fill, border, radius, weight, colour, width - belongs
+ * to GlobalStyles, which already styles `textarea` alongside every text
+ * input on the site. This file used to restate all of it with DIFFERENT
+ * values (transparent fill, a primary-coloured border, its own font size),
+ * which is the whole reason these two fields were the only ones on the
+ * screen that did not match the form beneath them. The single thing
+ * GlobalStyles cannot get right here is the height: 38px is correct for a
+ * one-line input and useless for a description.
  */
-export const Field = styled.div`
-  margin-bottom: 15px;
-`;
-
-export const Label = styled.label`
-  display: block;
-  margin-bottom: 5px;
-  font-weight: 600;
-  font-size: ${ props => props.theme.size.m };
-`;
-
-const field = css`
-  width: 100%;
-  padding: 10px;
-  border: 1px solid ${ props => props.theme.primary.neutral };
-  border-radius: ${ props => props.theme.borderRadius };
-  background: transparent;
-  color: ${ props => props.theme.font.normal };
-  font-family: inherit;
-  font-size: ${ props => props.theme.size.m };
-`;
-
-export const Input = styled.input`
-  ${ field }
-`;
-
 export const Textarea = styled.textarea`
-  ${ field }
-  min-height: 90px;
+  height: 90px;
+  padding: 8px 10px;
   resize: vertical;
 `;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@autobusal/common",
-  "version": "1.25.0",
+  "version": "1.25.1",
   "author": "Ferjolt Ozuni",
   "type": "module",
   "main": "index.ts"