From 37aa8d68507f1eab01cdafd034c818d505052626 Mon Sep 17 00:00:00 2001
From: "@suet-kei.chan" <suet-kei.chan@t-systems.com>
Date: Fri, 6 Feb 2026 16:37:42 +0100
Subject: [PATCH 1/2] feat: restore footer with responsive layout

- Show footer by changing display from none to block
- Set footer height to 46px with flexible height on mobile/tablet
- Add responsive breakpoints for optimal display on all devices
- Adjust app navigation padding to prevent footer overlap
- Optimize font sizes and spacing for small screens
---
 css/components/ncappnavigation.scss |  2 +-
 css/layouts/footer.scss             | 52 ++++++++++++++++++++++++-----
 css/layouts/guestview.scss          | 11 ++++--
 3 files changed, 52 insertions(+), 13 deletions(-)

diff --git a/css/components/ncappnavigation.scss b/css/components/ncappnavigation.scss
index 3228b5e..2c94cb5 100644
--- a/css/components/ncappnavigation.scss
+++ b/css/components/ncappnavigation.scss
@@ -87,7 +87,7 @@
 
 	.app-navigation-entry__settings {
 
-		padding: 0 0 1rem;
+		padding: 0 0 calc(46px + 0.5rem);
 
 		> li {
 			display: none;
diff --git a/css/layouts/footer.scss b/css/layouts/footer.scss
index 99a5b0c..859e7fa 100644
--- a/css/layouts/footer.scss
+++ b/css/layouts/footer.scss
@@ -20,32 +20,47 @@ footer {
 
 footer[role="contentinfo"] {
     background-color: var(--color-main-background);
-    display: none;
+    display: block;
     font: var(--footer-font);
     position: fixed;
     left: 0;
     right: 0;
     bottom: 0;
-    max-height: 60px;
-    max-width: calc(100% - 2rem);
+    height: 46px;
+    width: 100%;
     z-index: 998;
     border-top: 1px solid var(--color-border);
-    padding: 1.5rem;
+    padding: 0.5rem 1.5rem;
+    box-sizing: border-box;
+
+    @media screen and (max-width: $breakpoint-mobile) {
+        height: auto;
+        min-height: 46px;
+    }
 
     @media screen and (max-width: $breakpoint-mobile-small) {
-        padding: 1rem;
-        max-width: 100%;
+        padding: 0.5rem 1rem;
+    }
+
+    @media screen and (max-width: 400px) {
+        padding: 0.25rem 0.5rem;
     }
 
-    .footer-content {        
+    .footer-content {
         align-content: center;
         display: flex;
         flex-wrap: wrap;
-        gap: 1.5rem;
+        gap: 5rem;
         line-height: 1.5rem;
 
         @media screen and (max-width: $breakpoint-mobile-small) {
             gap: 0.5rem;
+            font-size: 0.875rem;
+        }
+
+        @media screen and (max-width: 400px) {
+            gap: 0.25rem;
+            font-size: 0.75rem;
         }
 
         #notice {
@@ -61,7 +76,15 @@ footer[role="contentinfo"] {
             gap: 1.5rem;
 
             @media screen and (max-width: $breakpoint-mobile-small) {
-                gap: 0.5rem;
+                flex-wrap: nowrap;
+                gap: 0.25rem;
+                justify-content: flex-start;
+                font-size: 0.75rem;
+            }
+
+            @media screen and (max-width: 400px) {
+                gap: 0.125rem;
+                font-size: 0.75rem;
             }
         }
 
@@ -69,6 +92,17 @@ footer[role="contentinfo"] {
             font: var(--footer-font); // override NC guest.scss
             padding: 0.5rem;
             margin: calc(-1 * 0.5rem) 0;
+
+            @media screen and (max-width: $breakpoint-mobile-small) {
+                padding: 0.25rem;
+                margin: calc(-1 * 0.25rem) 0;
+            }
+
+            @media screen and (max-width: 400px) {
+                padding: 0.125rem;
+                margin: calc(-1 * 0.125rem) 0;
+                font-size: 0.75rem;
+            }
         }
 
         li a:hover {
diff --git a/css/layouts/guestview.scss b/css/layouts/guestview.scss
index f2d1bda..950010b 100644
--- a/css/layouts/guestview.scss
+++ b/css/layouts/guestview.scss
@@ -61,17 +61,22 @@
     footer[role="contentinfo"] {
         background-color: var(--color-main-background);
         border-radius: 0px 0px 0.5rem 0.5rem;
-        box-sizing: unset;
+        box-sizing: border-box;
         font: var(--footer-font);
         position: fixed;
         left: 1rem;
         right: 1rem;
         bottom: 24px;
-        max-height: 60px;
+        height: 46px;
         max-width: calc(100% - 4rem);
         z-index: 998;
         border-top: 1px solid var(--color-border);
-        padding: 16px 16px;
+        padding: 0.5rem 1rem;
+
+        @media screen and (max-width: $breakpoint-mobile) {
+            height: auto;
+            min-height: 46px;
+        }
 
         @media screen and (max-width: $breakpoint-mobile-small) {
             border-radius: 0;

From ec8be16b8903fdabe790699a333295334726c426 Mon Sep 17 00:00:00 2001
From: "@suet-kei.chan" <suet-kei.chan@t-systems.com>
Date: Fri, 6 Feb 2026 16:46:45 +0100
Subject: [PATCH 2/2] fix: reduce footer gap on tablet devices

- Add tablet breakpoint to reduce gap from 5rem to 1.5rem
- Fixes excessive spacing on iPad Mini and similar devices
---
 css/layouts/footer.scss | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/css/layouts/footer.scss b/css/layouts/footer.scss
index 859e7fa..4934227 100644
--- a/css/layouts/footer.scss
+++ b/css/layouts/footer.scss
@@ -53,6 +53,10 @@ footer[role="contentinfo"] {
         gap: 5rem;
         line-height: 1.5rem;
 
+        @media screen and (max-width: $breakpoint-mobile) {
+            gap: 1.5rem;
+        }
+
         @media screen and (max-width: $breakpoint-mobile-small) {
             gap: 0.5rem;
             font-size: 0.875rem;