Skip to content

fix(tailwind): Remove spacing tokens that were messing with Shadcn #197

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
david-bretaud-dev merged 1 commit into from
Jul 25, 2026
Merged

fix(tailwind): Remove spacing tokens that were messing with Shadcn #197

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 0 additions & 11 deletions webapp/src/app/styles/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,6 @@

:root {
--radius: 0.625rem;
--spacing-base: 0.25rem;
}

/* ========================================================================
Expand All @@ -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);
Expand Down
2 changes: 1 addition & 1 deletion webapp/src/features/categories-filters/all-or-none-selector.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)}
Expand Down
8 changes: 4 additions & 4 deletions webapp/src/features/categories-filters/categories-checkbox-group.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
>
Expand All @@ -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)}
>
Expand Down
2 changes: 1 addition & 1 deletion webapp/src/features/categories-filters/main.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion webapp/src/features/charts/components/radar-benef-control.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,7 +87,7 @@ export const ChartRadarWithBenefAndControl: ChartComponentType<
/>

<ChartLegend
className="mt-md"
className="mt-3"
content={<ChartLegendContent />}
/>
</>
Expand Down
6 changes: 3 additions & 3 deletions webapp/src/features/controls/layer-control.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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
Expand All @@ -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
Expand Down
2 changes: 1 addition & 1 deletion webapp/src/features/fallback/error-boundary-fallback.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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} />
Expand Down
4 changes: 2 additions & 2 deletions webapp/src/features/indicators/components/indicator-date.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
4 changes: 2 additions & 2 deletions webapp/src/features/indicators/components/indicator-raw-value.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion webapp/src/features/indicators/components/indicator-scroll-container.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 ?? "",
)}
Expand Down
8 changes: 4 additions & 4 deletions webapp/src/features/indicators/components/indicator-section.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion webapp/src/features/indicators/soil/use-soil-indicator-elements.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
6 changes: 3 additions & 3 deletions webapp/src/features/popup/components/indicator-popup-header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand All @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion webapp/src/features/popup/forest-inventory/popup-forest-inventory.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,7 @@ export const ForestInventoryPopupContent: FC<
/>

<GridSelector
className="m-sm"
className="m-2"
onChange={(value) => setSelectedTab(value as TabKind)}
options={[
{
Expand Down
2 changes: 1 addition & 1 deletion webapp/src/features/popup/socio-eco/popup-socio-eco.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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={[
{
Expand Down
2 changes: 1 addition & 1 deletion webapp/src/widgets/header/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
2 changes: 1 addition & 1 deletion webapp/src/widgets/header/mode-toggle.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)}
>
Expand Down
6 changes: 3 additions & 3 deletions webapp/src/widgets/map-sidebar/main.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,15 +21,15 @@ 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>

<Separator />

<GridSelector
className="mx-sm my-md"
className="mx-2 my-3"
onChange={(value) => setSelectedFilterKind(value)}
options={[
{
Expand All @@ -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)",
Expand Down
Loading