From be7c6c4112ed2f492901c39f49e13beaa581c4fb Mon Sep 17 00:00:00 2001
From: David Bretaud <david.bretaud.dev@gmail.com>
Date: Sun, 12 Jul 2026 16:47:00 +0200
Subject: [PATCH] fix(tailwind): Remove spacing tokens that were messing with
 Shadcn components

---
 webapp/src/app/styles/index.css                       | 11 -----------
 .../categories-filters/all-or-none-selector.tsx       |  2 +-
 .../categories-filters/categories-checkbox-group.tsx  |  8 ++++----
 webapp/src/features/categories-filters/main.tsx       |  2 +-
 .../charts/components/radar-benef-control.tsx         |  2 +-
 webapp/src/features/controls/layer-control.tsx        |  6 +++---
 .../src/features/fallback/error-boundary-fallback.tsx |  2 +-
 .../features/indicators/components/indicator-date.tsx |  4 ++--
 .../indicators/components/indicator-raw-value.tsx     |  4 ++--
 .../components/indicator-scroll-container.tsx         |  2 +-
 .../indicators/components/indicator-section.tsx       |  8 ++++----
 .../indicators/soil/use-soil-indicator-elements.tsx   |  2 +-
 .../popup/components/indicator-popup-header.tsx       |  6 +++---
 .../popup/forest-inventory/popup-forest-inventory.tsx |  2 +-
 .../src/features/popup/socio-eco/popup-socio-eco.tsx  |  2 +-
 webapp/src/widgets/header/index.tsx                   |  2 +-
 webapp/src/widgets/header/mode-toggle.tsx             |  2 +-
 webapp/src/widgets/map-sidebar/main.tsx               |  6 +++---
 18 files changed, 31 insertions(+), 42 deletions(-)

diff --git a/webapp/src/app/styles/index.css b/webapp/src/app/styles/index.css
index 9ac5f832..49f14edb 100644
--- a/webapp/src/app/styles/index.css
+++ b/webapp/src/app/styles/index.css
@@ -18,7 +18,6 @@
 
 :root {
   --radius: 0.625rem;
-  --spacing-base: 0.25rem;
 }
 
 /* ========================================================================
@@ -30,16 +29,6 @@
  */
 
 @theme inline {
-  --spacing-2xs: calc(var(--spacing-base) / 2);
-  --spacing-xs: calc(var(--spacing-base));
-  --spacing-sm: calc(var(--spacing-base) * 2);
-  --spacing-md: calc(var(--spacing-base) * 3);
-  --spacing-lg: calc(var(--spacing-base) * 4);
-  --spacing-xl: calc(var(--spacing-base) * 5);
-  --spacing-2xl: calc(var(--spacing-base) * 6);
-  --spacing-3xl: calc(var(--spacing-base) * 8);
-  --spacing-4xl: calc(var(--spacing-base) * 10);
-
   --radius-sm: calc(var(--radius) - 4px);
   --radius-md: calc(var(--radius) - 2px);
   --radius-lg: var(--radius);
diff --git a/webapp/src/features/categories-filters/all-or-none-selector.tsx b/webapp/src/features/categories-filters/all-or-none-selector.tsx
index 7c74219b..fcd99275 100644
--- a/webapp/src/features/categories-filters/all-or-none-selector.tsx
+++ b/webapp/src/features/categories-filters/all-or-none-selector.tsx
@@ -70,7 +70,7 @@ export const AllOrNoneSelector: FC = () => {
     }) as const;
 
   return (
-    <div className="flex flex-row justify-center items-center gap-sm">
+    <div className="flex flex-row justify-center items-center gap-2">
       <Button
         onClick={onAllClick}
         {...getButtonProps(isAll)}
diff --git a/webapp/src/features/categories-filters/categories-checkbox-group.tsx b/webapp/src/features/categories-filters/categories-checkbox-group.tsx
index 29b370ae..2e1ff0c8 100644
--- a/webapp/src/features/categories-filters/categories-checkbox-group.tsx
+++ b/webapp/src/features/categories-filters/categories-checkbox-group.tsx
@@ -27,11 +27,11 @@ export const CategoriesCheckboxGroup: FC<CategoriesCheckboxGroupProps> = ({
 }) => {
   return (
     <section>
-      <p className="font-medium text-sm mb-md">{title}</p>
-      <FieldGroup className="mx-auto gap-sm">
+      <p className="font-medium text-sm mb-3">{title}</p>
+      <FieldGroup className="mx-auto gap-2">
         {items.map((item) => (
           <Field
-            className="border border-border rounded-md p-sm align-start gap-sm"
+            className="border border-border rounded-md p-2 align-start gap-2"
             key={item.identifier}
             orientation="horizontal"
           >
@@ -44,7 +44,7 @@ export const CategoriesCheckboxGroup: FC<CategoriesCheckboxGroupProps> = ({
             />
 
             <FieldLabel
-              className="font-normal cursor-pointer gap-sm items-center"
+              className="font-normal cursor-pointer gap-2 items-center"
               // Ensures that the label is correctly associated with the checkbox input field
               htmlFor={FIELD_HTML_ID(item.identifier)}
             >
diff --git a/webapp/src/features/categories-filters/main.tsx b/webapp/src/features/categories-filters/main.tsx
index 9112a478..07b92ea7 100644
--- a/webapp/src/features/categories-filters/main.tsx
+++ b/webapp/src/features/categories-filters/main.tsx
@@ -51,7 +51,7 @@ export const CategoriesFilters: FC<CategoriesFiltersProps> = ({ disabled }) => {
   };
 
   return (
-    <div className="flex flex-col gap-md">
+    <div className="flex flex-col gap-3">
       <AllOrNoneSelector />
 
       <CategoriesCheckboxGroup
diff --git a/webapp/src/features/charts/components/radar-benef-control.tsx b/webapp/src/features/charts/components/radar-benef-control.tsx
index b58c2819..efcfde25 100644
--- a/webapp/src/features/charts/components/radar-benef-control.tsx
+++ b/webapp/src/features/charts/components/radar-benef-control.tsx
@@ -87,7 +87,7 @@ export const ChartRadarWithBenefAndControl: ChartComponentType<
               />
 
               <ChartLegend
-                className="mt-md"
+                className="mt-3"
                 content={<ChartLegendContent />}
               />
             </>
diff --git a/webapp/src/features/controls/layer-control.tsx b/webapp/src/features/controls/layer-control.tsx
index 4789ac60..af0a0cf2 100644
--- a/webapp/src/features/controls/layer-control.tsx
+++ b/webapp/src/features/controls/layer-control.tsx
@@ -24,7 +24,7 @@ const ICON_SIZE = 18;
 
 export const renderAnchor: LayerControlRenderAnchor = () => {
   const container = document.createElement("div");
-  container.className = "cursor-pointer p-sm";
+  container.className = "cursor-pointer p-2";
   const root = createRoot(container);
   root.render(<LayersIcon size={ICON_SIZE} />);
   return container;
@@ -134,7 +134,7 @@ function LayerRow({
       key={key}
       orientation="horizontal"
     >
-      <div className="flex items-center justify-center w-2xl h-2xl">
+      <div className="flex items-center justify-center w-6 h-6">
         {renderIcon?.(isChecked)}
         <Activity mode={renderIcon ? "hidden" : "visible"}>
           <Checkbox
@@ -161,7 +161,7 @@ export const renderLayerRow: LayerControlRenderLayerRow = ({
 }) => {
   const container = document.createElement("div");
   container.className =
-    "cursor-pointer px-sm py-xs flex flex-row gap-sm mb-xs w-full rounded-sm hover:bg-accent";
+    "cursor-pointer px-2 py-1 flex flex-row gap-2 mb-1 w-full rounded-sm hover:bg-accent";
   const root = createRoot(container);
   root.render(
     <LayerRow
diff --git a/webapp/src/features/fallback/error-boundary-fallback.tsx b/webapp/src/features/fallback/error-boundary-fallback.tsx
index 4ed635fc..0f0dde98 100644
--- a/webapp/src/features/fallback/error-boundary-fallback.tsx
+++ b/webapp/src/features/fallback/error-boundary-fallback.tsx
@@ -30,7 +30,7 @@ export function ErrorBoundaryFallback({
   return (
     <>
       <Alert
-        className="w-full rounded-t-md rounded-b-none border-none text-xl py-lg bg-rose-950"
+        className="w-full rounded-t-md rounded-b-none border-none text-xl py-4 bg-rose-950"
         variant="destructive"
       >
         <TriangleAlert size={ICON_SIZE_HEADER} />
diff --git a/webapp/src/features/indicators/components/indicator-date.tsx b/webapp/src/features/indicators/components/indicator-date.tsx
index b2bec7b6..7f6f6995 100644
--- a/webapp/src/features/indicators/components/indicator-date.tsx
+++ b/webapp/src/features/indicators/components/indicator-date.tsx
@@ -13,8 +13,8 @@ export const IndicatorDate: FC<IndicatorDateProps> = ({ date }) => {
   const { t } = useTranslation("all4trees");
 
   return (
-    <div className="flex flex-row items-center justify-between gap-sm flex-1">
-      <div className="flex flex-row items-center gap-xs">
+    <div className="flex flex-row items-center justify-between gap-2 flex-1">
+      <div className="flex flex-row items-center gap-1">
         <CalendarIcon size={ICON_SIZE} />
         <p> {t("indicators.common.date")}</p>
       </div>
diff --git a/webapp/src/features/indicators/components/indicator-raw-value.tsx b/webapp/src/features/indicators/components/indicator-raw-value.tsx
index b2fde9c1..51e37fd4 100644
--- a/webapp/src/features/indicators/components/indicator-raw-value.tsx
+++ b/webapp/src/features/indicators/components/indicator-raw-value.tsx
@@ -16,8 +16,8 @@ export const IndicatorRawValue: FC<IndicatorRawValueProps> = ({
   }
 
   return (
-    <div className="flex flex-row items-center justify-between gap-sm flex-1 mt-sm text-sm">
-      <div className="flex flex-row items-center gap-xs text-muted-foreground">
+    <div className="flex flex-row items-center justify-between gap-2 flex-1 mt-2 text-sm">
+      <div className="flex flex-row items-center gap-1 text-muted-foreground">
         {iconStart}
         <p>{dataName}</p>
       </div>
diff --git a/webapp/src/features/indicators/components/indicator-scroll-container.tsx b/webapp/src/features/indicators/components/indicator-scroll-container.tsx
index 3f2f6dcd..3aef4b28 100644
--- a/webapp/src/features/indicators/components/indicator-scroll-container.tsx
+++ b/webapp/src/features/indicators/components/indicator-scroll-container.tsx
@@ -13,7 +13,7 @@ export const IndicatorScrollContainer: FC<IndicatorScrollContainerProps> = ({
   return (
     <div
       className={cx(
-        "p-md flex flex-col gap-md text-xs",
+        "p-3 flex flex-col gap-3 text-xs",
         "overflow-y-scroll custom-scrollbar",
         className ?? "",
       )}
diff --git a/webapp/src/features/indicators/components/indicator-section.tsx b/webapp/src/features/indicators/components/indicator-section.tsx
index 45219304..0ecb37a4 100644
--- a/webapp/src/features/indicators/components/indicator-section.tsx
+++ b/webapp/src/features/indicators/components/indicator-section.tsx
@@ -48,20 +48,20 @@ export const IndicatorSection: FC<IndicatorSectionProps> = ({
   );
 
   return (
-    <section className="flex flex-col w-full gap-sm">
-      <div className="flex flex-row items-center gap-xs">
+    <section className="flex flex-col w-full gap-2">
+      <div className="flex flex-row items-center gap-1">
         {iconStart}
         <h5 className="px-5 pb-2 font-bold text-base">{title}</h5>
       </div>
 
       {valueIndicators.length > 0 && (
         <Card>
-          <CardContent className="py-sm">{valueIndicators}</CardContent>
+          <CardContent className="py-2">{valueIndicators}</CardContent>
         </Card>
       )}
 
       {chartIndicators.length > 0 && (
-        <div className="flex flex-col w-full gap-sm">
+        <div className="flex flex-col w-full gap-2">
           {chartIndicators.map((child, index) => (
             // `w-0 min-w-full` makes each chart fill the available width without
             // contributing to the popup's intrinsic (max-content) width. Charts
diff --git a/webapp/src/features/indicators/soil/use-soil-indicator-elements.tsx b/webapp/src/features/indicators/soil/use-soil-indicator-elements.tsx
index b65a651a..6780dfa8 100644
--- a/webapp/src/features/indicators/soil/use-soil-indicator-elements.tsx
+++ b/webapp/src/features/indicators/soil/use-soil-indicator-elements.tsx
@@ -40,7 +40,7 @@ export const useSoilIndicatorElements = (
     { type: "divider" },
     {
       children: (
-        <div className="flex flex-col gap-sm">
+        <div className="flex flex-col gap-2">
           <ChartAquaticErosion
             benef={{
               rainfall: data.soil_eros_rainfall,
diff --git a/webapp/src/features/popup/components/indicator-popup-header.tsx b/webapp/src/features/popup/components/indicator-popup-header.tsx
index e5f87abe..5ed0b766 100644
--- a/webapp/src/features/popup/components/indicator-popup-header.tsx
+++ b/webapp/src/features/popup/components/indicator-popup-header.tsx
@@ -61,7 +61,7 @@ export const IndicatorPopupHeader: FC<IndicatorPopupHeaderProps> = ({
 }) => {
   return (
     <Alert
-      className="w-full rounded-t-md rounded-b-none border-none text-xl py-lg"
+      className="w-full rounded-t-md rounded-b-none border-none text-xl py-4"
       variant="info"
     >
       {icon}
@@ -70,13 +70,13 @@ export const IndicatorPopupHeader: FC<IndicatorPopupHeaderProps> = ({
       {(subtitle || date) && (
         <AlertDescription
           className={cn("text-muted-foreground text-sm", {
-            "flex flex-col gap-sm": subtitle && date,
+            "flex flex-col gap-2": subtitle && date,
           })}
         >
           {subtitle && <span>{subtitle}</span>}
 
           {date && (
-            <div className="flex flex-row items-center gap-xs text-muted-foreground">
+            <div className="flex flex-row items-center gap-1 text-muted-foreground">
               <Calendar size={ICON_SIZE} />
               <p className="pt-0.5">{date}</p>
             </div>
diff --git a/webapp/src/features/popup/forest-inventory/popup-forest-inventory.tsx b/webapp/src/features/popup/forest-inventory/popup-forest-inventory.tsx
index f8b96abe..a744a0ca 100644
--- a/webapp/src/features/popup/forest-inventory/popup-forest-inventory.tsx
+++ b/webapp/src/features/popup/forest-inventory/popup-forest-inventory.tsx
@@ -80,7 +80,7 @@ export const ForestInventoryPopupContent: FC<
       />
 
       <GridSelector
-        className="m-sm"
+        className="m-2"
         onChange={(value) => setSelectedTab(value as TabKind)}
         options={[
           {
diff --git a/webapp/src/features/popup/socio-eco/popup-socio-eco.tsx b/webapp/src/features/popup/socio-eco/popup-socio-eco.tsx
index 1f3c6b03..07dac99b 100644
--- a/webapp/src/features/popup/socio-eco/popup-socio-eco.tsx
+++ b/webapp/src/features/popup/socio-eco/popup-socio-eco.tsx
@@ -76,7 +76,7 @@ export const SocioEcoIndicator: FC<SocioEcoIndicatorProps> = ({
       />
 
       <GridSelector
-        className="m-sm text-base"
+        className="m-2 text-base"
         onChange={(value) => setSelectedTab(value as TabKind)}
         options={[
           {
diff --git a/webapp/src/widgets/header/index.tsx b/webapp/src/widgets/header/index.tsx
index 343b7ae9..c8d1aeb7 100644
--- a/webapp/src/widgets/header/index.tsx
+++ b/webapp/src/widgets/header/index.tsx
@@ -29,7 +29,7 @@ export const Header: FC<HeaderProps> = ({ logoSrc, hasDashboard }) => {
   return (
     <header className="bg-background border-b border-border md:p-3 p-2 relative z-40 flex-0">
       <div className="mx-auto max-w-screen-2xl">
-        <div className="flex items-center justify-between gap-md">
+        <div className="flex items-center justify-between gap-3">
           <img
             alt="Logo"
             className="md:h-12 h-8"
diff --git a/webapp/src/widgets/header/mode-toggle.tsx b/webapp/src/widgets/header/mode-toggle.tsx
index db2baf44..da544894 100644
--- a/webapp/src/widgets/header/mode-toggle.tsx
+++ b/webapp/src/widgets/header/mode-toggle.tsx
@@ -75,7 +75,7 @@ export const ModeToggle: FC = () => {
         <DropdownMenuSubContent className="bg-background">
           {colorModes.map((config) => (
             <DropdownMenuItem
-              className="gap-sm"
+              className="gap-2"
               key={config.identifier}
               onClick={() => setTheme(config.identifier)}
             >
diff --git a/webapp/src/widgets/map-sidebar/main.tsx b/webapp/src/widgets/map-sidebar/main.tsx
index b5a33348..9b11d3b6 100644
--- a/webapp/src/widgets/map-sidebar/main.tsx
+++ b/webapp/src/widgets/map-sidebar/main.tsx
@@ -21,7 +21,7 @@ export function MapSidebar() {
 
   return (
     <div className="flex flex-col h-full">
-      <h3 className="px-4 py-2 font-semibold flex flex-row items-center flex-start gap-sm">
+      <h3 className="px-4 py-2 font-semibold flex flex-row items-center flex-start gap-2">
         <ListFilterIcon size={18} />
         {t("filters.sidebarLayout.title")}
       </h3>
@@ -29,7 +29,7 @@ export function MapSidebar() {
       <Separator />
 
       <GridSelector
-        className="mx-sm my-md"
+        className="mx-2 my-3"
         onChange={(value) => setSelectedFilterKind(value)}
         options={[
           {
@@ -45,7 +45,7 @@ export function MapSidebar() {
       />
 
       <div
-        className="px-4 mb-md overflow-y-scroll custom-scrollbar flex-1"
+        className="px-4 mb-3 overflow-y-scroll custom-scrollbar flex-1"
         style={{
           "--scrollbar-thumb": "var(--info-foreground)",
           "--scrollbar-track": "var(--background)",