Adjust home screen bottom navigation height and padding (#2904)

* Adjust home screen bottom navigation height and padding

- Increase `--launcher-bottom-nav-height` to 86px to ensure consistent layout, replacing a min-height that was not tracked in a variable, producing inconsistent bottom padding.
- Update wrapper padding and simplify selectors to provide better scroll clearance for the bottom navigation bar.

* Adjust some more nav height

* Update package.json to match installed component version

* attempt lightningcss config adjustment to fix CI

* Change CI to run Vite version from package.json definition

Update to v8 is causing errors

* CSS variable fallback fix for consistency

Author: cairocoder01

.github/workflows/ci.yml

@@ -37,7 +37,7 @@ jobs:
       with:
         node-version: 22.x
         cache: 'npm'
-    - run: npm install -g vite eslint @babel/eslint-parser
+    - run: npm install -g eslint @babel/eslint-parser
 
     - name: Install PHP
       uses: shivammathur/setup-php@master
@@ -118,8 +118,8 @@ jobs:
       if: steps.changed-css-js-files.outputs.all_changed_and_modified_files != ''
       run : |
         find dt-assets/ -iname "*.min.js" -or -iname "*.map" -or -iname "*.min.css" -delete && rm -rf build/
-        vite build
-        vite build --config vite.config.scripts.js
+        npx vite build
+        npx vite build --config vite.config.scripts.js
         git diff --exit-code -- . ':(exclude)package-lock.json'
 
     - name: Install Subversion

dt-apps/dt-home/assets/css/home-screen.css

@@ -18,7 +18,7 @@
     --success-color: #4caf50;
     --black: #000000;
     --app-icon-default: #0a0a0a;
-    --launcher-bottom-nav-height: 58px;
+    --launcher-bottom-nav-height: 65px;
     --max-bottom-width: 800px;
     --nav-home-bg-dark: #3a4fb8;
     --nav-text-white: #ffffff;
@@ -978,7 +978,7 @@ body.launcher {
         width: 100%;
         overflow: hidden;
         position: relative;
-        padding-bottom: var(--launcher-bottom-nav-height, 70px);
+        padding-bottom: var(--launcher-bottom-nav-height, 58px);
     }
 
     .launcher-iframe-container iframe {
@@ -994,7 +994,6 @@ body.launcher {
     left: 0;
     right: 0;
     height: var(--launcher-bottom-nav-height, 58px);
-    min-height: 86px;
     width: 100%;
     z-index: 1000;
     background-color: var(--surface-0, #ffffff);
@@ -1008,7 +1007,6 @@ body.launcher {
 
     .nav-container {
         height: var(--launcher-bottom-nav-height, 58px);
-        min-height: 86px;
         width: 100%;
         max-width: var(--max-bottom-width, 800px);
         display: flex;
@@ -1170,7 +1168,6 @@ body.launcher {
     }
 }
 
-body:has(.dt-launcher-bottom-nav),
 #wrapper:has(.dt-launcher-bottom-nav) {
     padding-bottom: var(--launcher-bottom-nav-height, 58px);
 }

package-lock.json

@@ -13,7 +13,7 @@
   "devDependencies": {
     "@babel/eslint-parser": "^7.28.4",
     "@babel/preset-env": "^7.28.3",
-    "@disciple.tools/web-components": "^0.8.9",
+    "@disciple.tools/web-components": "^0.8.10",
     "@eslint/js": "^9.37.0",
     "@kucrut/vite-for-wp": "^0.12.0",
     "@rollup/plugin-inject": "^5.0.5",

package.json

@@ -81,6 +81,9 @@ export default defineConfig(({ mode }) => {
       }),
     ],
     css: {
+      lightningcss: {
+        errorRecovery: true,
+      },
       preprocessorOptions: {
         scss: {
           api: 'modern-compiler',