Improved Footer structure

Author: lcharette

CHANGELOG.md

@@ -14,6 +14,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 - [Skeleton + Monorepo][Docker] Update tp PHP 8.4
 - [Core] Add `SERVE_PORT` env variable for the built-in PHP Server.
 - [Admin] Fix missing crumbs in Permission detail page
+- [Pink-Cupcake] Improved footer structure
 
 ## 6.0.0-beta.6 - 2025-11-23
 - Update Docker Readme

packages/skeleton/app/assets/components/FooterContent.vue

@@ -1,3 +1,5 @@
 <template>
-    <UFFooterContent>{{ $t('COPYRIGHT', { year: new Date().getFullYear() }) }}</UFFooterContent>
+    <UFFooterContent>
+        <div>{{ $t('COPYRIGHT', { year: new Date().getFullYear() }) }}</div>
+    </UFFooterContent>
 </template>

packages/theme-pink-cupcake/CHANGELOG.md

@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 - Minor UI tweaks to sidebar components
 - Renamed sidebar class
 - CSS: Add webkit-font-smoothing
+- Improved footer structure
 
 ## [6.0.0-beta.6](https://github.com/userfrosting/theme-pink-cupcake/compare/6.0.0-beta.5...6.0.0-beta.6)
 - Fix fontsource resources not being found when importing the main Less file in skeleton

packages/theme-pink-cupcake/src/components/Content/FooterContent.vue

@@ -1,22 +1,21 @@
 <template>
-    <footer class="uk-section uk-section-small uk-section-muted uk-text-center">
+    <footer class="uk-section uk-section-small uk-section-muted">
         <hr />
-        <p class="uk-text-small uk-text-center" data-test="slot">
+        <div class="uk-text-small uk-grid-divider uk-grid-small uk-child-width-auto uk-flex-center" uk-grid data-test="slot">
             <slot></slot>
             <slot name="userfrosting">
-                <span v-if="$slots.default"> | </span>
-                <span v-html="$t('BUILT_WITH_UF')"></span>
-                <span>
-                    | {{ $t('THEME_BY') }}
+                <div v-html="$t('BUILT_WITH_UF')"></div>
+                <div>
+                    {{ $t('THEME_BY') }} 
                     <a
                         href="http://getuikit.com"
                         title="Visit UIkit 3 site"
                         target="_blank"
                         data-uk-tooltip>
                         <span data-uk-icon="uikit"></span>
                     </a>
-                </span>
+                </div>
             </slot>
-        </p>
+        </div>
     </footer>
 </template>