Centralize and use global spacing variables

This commit improves UI consistency. It also improves maintainability by
removing "magic values" in favor of standardized spacing throughout the
application.

- Adjust spacing variables to match the convention.
- Add `_spacing.scss` to define a centralized set of spacing variables, both
  absolute and relative, to standardize the spacing throughout the application.
  This new approach ensures a consistent spacing logic across all components and
  layouts, facilitating easier maintenance and scalability of the styling codebase.
- Update various SCSS styles to utilize the new spacing variables. This change
  harmonizes the spacing across different parts of the application, aligning with
  the new design system's principles.
- Slightly adjust existing padding/margin/gaps for better consistency.

Other supporting changes per component:

- RatingCircle: Update style names to match convention and simplify
  hacky way to inject circle width value through CSS variables. Add
  tests for the new behavior and refactor existing tests for easier
  extensibility.
- TheFooter: Add small gap when footer items wrap.
- HiearchicalTreeNode: Refactor variables to separate caret size clearly
  from padding applied.
- App: Make padding responsive as initial behavior of v0.13.0 before
  5d940b57ef.
- ModalDialog: Use responsive absolute values instead of percentage.
- HorizontalResizeSlider:
  - Use `v-bind` instead of hacky way to inject SCSS values through variables.
  - Remove `verticalMargin` property to simplify its styling.
- Move `src/presentation/assets/styles/components/_card.scss` closer to
  components that it styles. Update structure documentation.

The centralization of spacing definitions will aid in future design
adjustments, ensuring that updates to spacing can be made swiftly and
uniformly across the application. It's a step towards a more maintainable
and scalable frontend architecture.

tests/unit/presentation/components/Scripts/Menu/Recommendation/Rating/RatingCircle.spec.ts

@@ -1,6 +1,7 @@
 import { describe, it, expect } from 'vitest';
 import { shallowMount } from '@vue/test-utils';
 import RatingCircle from '@/presentation/components/Scripts/Menu/Recommendation/Rating/RatingCircle.vue';
+import { formatAssertionMessage } from '@tests/shared/FormatAssertionMessage';
 
 const DOM_SVG_SELECTOR = 'svg';
 const DOM_CIRCLE_SELECTOR = `${DOM_SVG_SELECTOR} > circle`;
@@ -39,12 +40,6 @@ describe('RatingCircle.vue', () => {
   });
 
   describe('SVG and circle styles', () => {
-    it('sets --circle-stroke-width style correctly', () => {
-      const wrapper = shallowMount(RatingCircle);
-      const svgElement = wrapper.find(DOM_SVG_SELECTOR).element;
-      expect(svgElement.style.getPropertyValue('--circle-stroke-width')).to.equal('2px');
-    });
-
     it('renders circle with correct fill attribute when filled prop is true', () => {
       const wrapper = shallowMount(RatingCircle, {
         propsData: {
@@ -58,32 +53,49 @@ describe('RatingCircle.vue', () => {
 
     it('renders circle with the correct viewBox property', () => {
       const wrapper = shallowMount(RatingCircle);
-      const circle = wrapper.find(DOM_SVG_SELECTOR);
+      const circleElement = wrapper.find(DOM_SVG_SELECTOR);
 
-      expect(circle.attributes('viewBox')).to.equal('-1 -1 22 22');
+      expect(circleElement.attributes('viewBox')).to.equal('-1 -1 22 22');
     });
   });
 
   describe('circle attributes', () => {
-    it('renders circle with the correct cx attribute', () => {
-      const wrapper = shallowMount(RatingCircle);
-      const circleElement = wrapper.find(DOM_CIRCLE_SELECTOR);
-
-      expect(circleElement.attributes('cx')).to.equal('10'); // Based on circleDiameterInPx = 20
-    });
-
-    it('renders circle with the correct cy attribute', () => {
-      const wrapper = shallowMount(RatingCircle);
-      const circleElement = wrapper.find(DOM_CIRCLE_SELECTOR);
-
-      expect(circleElement.attributes('cy')).to.equal('10'); // Based on circleDiameterInPx = 20
-    });
-
-    it('renders circle with the correct r attribute', () => {
-      const wrapper = shallowMount(RatingCircle);
-      const circleElement = wrapper.find(DOM_CIRCLE_SELECTOR);
-
-      expect(circleElement.attributes('r')).to.equal('9'); // Based on circleRadiusWithoutStrokeInPx = circleDiameterInPx / 2 - circleStrokeWidthInPx / 2
+    const testScenarios: ReadonlyArray<{
+      readonly attributeKey: string;
+      readonly expectedValue: string;
+    }> = [
+      {
+        attributeKey: 'stroke-width',
+        expectedValue: '2px', // Based on circleStrokeWidthInPx = 2
+      },
+      {
+        attributeKey: 'cx',
+        expectedValue: '10', // Based on circleDiameterInPx = 20
+      },
+      {
+        attributeKey: 'cy',
+        expectedValue: '10', // Based on circleStrokeWidthInPx = 2
+      },
+      {
+        attributeKey: 'r',
+        expectedValue: '9', // Based on circleRadiusWithoutStrokeInPx = circleDiameterInPx / 2 - circleStrokeWidthInPx / 2
+      },
+    ];
+    testScenarios.forEach(({
+      attributeKey, expectedValue,
+    }) => {
+      it(`renders circle with the correct ${attributeKey} attribute`, () => {
+        // act
+        const wrapper = shallowMount(RatingCircle);
+        const circleElement = wrapper.find(DOM_CIRCLE_SELECTOR);
+        const actualValue = circleElement.attributes(attributeKey);
+        // assert
+        expect(actualValue).to.equal(expectedValue, formatAssertionMessage([
+          `Expected value: ${expectedValue}`,
+          `Actual value: ${actualValue}`,
+          `Attribute: ${attributeKey}`,
+        ]));
+      });
     });
   });
 });