introduce fluid spatial dimensions via css clamp for responsive padding and gap calculations

[kofi-k]

Our layout containers (SectionContainerStyle and its variants) currently rely on verbose breakpoint blocks (ZERO through XL) to adjust padding and gaps.

This PR introduces SiteFluidSpacing, a centralized configuration that automatically handles responsive spacing. By using CSS clamp() and calc() under the hood, it replaces rigid media queries with fluid scaling between our 480px and 1300px viewports.

[Erikvv]

This is not what I meant. I meant to

• keep the calculation in CSS
• use headless chrome to render an element
• inspect the DOM to see if the sizes are as expected.

This is similar to what we already do in https://github.com/Zenmo/lux-website/blob/main/site/src/commonTest/kotlin/TextTest.kt

And then repeat this test with a few viewport widths.

[kofi-k]

ha okay. I see what you mean now, you want us to test the actual browser layout rendering across viewports. appreciate the extra notes!!

[Erikvv]

👍

[Erikvv]

I would hardcode the expected numbers, especially for the narrow and wide viewports.

[kofi-k]

hardcoding didn't work. the narrow and wide tests both failed with the same actual value regardless of the requested width:

Expected <15> with absolute tolerance <1>, actual <96.6768>                                                                                                                                                                    
Expected <250> with absolute tolerance <1>, actual <96.6768> 

window.resizeTo() does absolutely nothing in the headless chrome/karma environment it seems.
96.68px is what the clamp gives at the fixed default viewport (~765px). expectedClamp() helper reads window.innerWidth at runtime, so both sides always agreed.
the tests passed but weren't verifying narrow/wide, can this even be fixed without a real browser environment? or should i remove them?

[Erikvv]

How are you even running the test? I have an error that webpack doesn't understand maptiler-sdk.css.

I think we are running into several limitations of the current test setup. I think the best approach is to start from ground up with a different testing skeleton, and rewrite the tests for the new situation.

But this is a bunch of work and it doesn't help us now.

can this even be fixed without a real browser environment?

Playwright or Puppeteer can do different viewports just fine:

import { chromium } from "playwright";

const browser = await chromium.launch({ headless: true });

const context = await browser.newContext({
  viewport: {
    width: 400,
    height: 768,
  },
});

const page = await context.newPage();
await page.goto("http://localhost:8080");

console.log(await page.evaluate(() => window.innerWidth));

await page.setViewportSize({ width: 890, height: 768 });

or should i remove them?

I would rewrite the tests so they no longer succeed when they should be failing.

And then mark them as @Ignore with a comment explaining why they're failing.

And then merge this and forget about it.

[kofi-k]

marked them @ignore with a note pointing to Playwright and moving on 🤷