Make defining flexbox space filters less bug-prone

[maxpatiiuk]

In the code, we often use a <span> element like this inside of a flexbox container:

specify7/specifyweb/frontend/js_src/lib/components/HomePage/AboutSpecify.tsx

Lines 58 to 59 in 17d5982

	{/* REFACTOR: replace span elements like this with a separator */}
	<span className="-ml-2 flex-1" />

We use that to make span occupy all the space it can when there is free space. The negative margin eats the gap introduced by the <span> element itself (since it's not displayed visually)

However, in the above example -ml-2 class name is dependent on flexbox container class names. If flex container is flex-column, then -ml-2 is replaced with -mt-2. If flex gap is not 2, then -ml-2 is replaced with the actual gap. Thus the gap is specified in both places, which is bug prone (and we have bugs related to that).

Need to find a way to replace all permutations of <span className="-ml-2 flex-1" /> with something like this:

const filler = <span className="-mt-[var(--vertical-gap)] -ml-[var(--horizontal-gap)] flex-1" />;
// and then just use it like this in the code:
<div className="flex gap-4 flex-col">
  // ...
  {fillter}
  // ...
</div>

The trickiness is that depending on the presence of flex-col/flex-row in flex container and depending on the value of gap-x, appropriate --vertical-gap or --horizontal-gap CSS variables need to be set