From d96eb67c3cba87b6060572b268fc7620445b2ac5 Mon Sep 17 00:00:00 2001
From: Alexander Ackermann <abackermann91@gmail.com>
Date: Fri, 17 Apr 2026 14:18:16 +0200
Subject: [PATCH 1/3] feat: make the topbar less prominent

---
 .../OcFloatingActionButton/OcFloatingActionButton.vue       | 2 +-
 .../web-runtime/src/components/SidebarNav/SidebarNav.vue    | 5 +++--
 packages/web-runtime/src/layouts/Application.vue            | 6 ++----
 3 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/packages/design-system/src/components/OcFloatingActionButton/OcFloatingActionButton.vue b/packages/design-system/src/components/OcFloatingActionButton/OcFloatingActionButton.vue
index d143fa953e..029e4260a0 100644
--- a/packages/design-system/src/components/OcFloatingActionButton/OcFloatingActionButton.vue
+++ b/packages/design-system/src/components/OcFloatingActionButton/OcFloatingActionButton.vue
@@ -21,7 +21,7 @@
       :id="buttonId"
       class="rounded-full size-14"
       appearance="filled"
-      color-role="secondary"
+      color-role="primary"
       :aria-label="computedAriaLabel"
       :type="mode === 'action' && to ? routerLinkComponent : 'button'"
       :to="to"
diff --git a/packages/web-runtime/src/components/SidebarNav/SidebarNav.vue b/packages/web-runtime/src/components/SidebarNav/SidebarNav.vue
index 4890ef2a27..423a1a1e5b 100644
--- a/packages/web-runtime/src/components/SidebarNav/SidebarNav.vue
+++ b/packages/web-runtime/src/components/SidebarNav/SidebarNav.vue
@@ -5,12 +5,13 @@
   >
     <div class="flex flex-col grow">
       <nav class="oc-sidebar-nav mt-3 px-1" :aria-label="$gettext('Sidebar navigation menu')">
-        <div v-if="floatingActionButton && !isMobile" class="pb-3 px-2">
+        <div v-if="floatingActionButton && !isMobile" class="pb-6 px-2">
           <oc-button
             :id="getButtonId(floatingActionButton.id)"
             :disabled="isFloatingActionButtonDisabled"
             appearance="filled"
-            class="oc-app-floating-action-button w-full"
+            color-role="primary"
+            class="oc-app-floating-action-button w-full h-[48px] min-w-[100px] rounded-xl shadow-md"
             @click="floatingActionButton.handler?.()"
           >
             <oc-icon :name="floatingActionButton.icon" />
diff --git a/packages/web-runtime/src/layouts/Application.vue b/packages/web-runtime/src/layouts/Application.vue
index c4e9ccca93..8ca7f907ae 100644
--- a/packages/web-runtime/src/layouts/Application.vue
+++ b/packages/web-runtime/src/layouts/Application.vue
@@ -11,11 +11,9 @@
     </div>
     <div
       id="web-content-main"
-      class="flex flex-col items-start justify-start grow shrink basis-auto px-2 pb-2 overflow-y-hidden"
+      class="flex flex-col items-start justify-start grow shrink basis-auto overflow-y-hidden"
     >
-      <div
-        class="app-container flex bg-role-surface-container rounded-xl size-full overflow-hidden"
-      >
+      <div class="app-container flex bg-role-surface-container size-full overflow-hidden">
         <app-loading-spinner v-if="isLoading" />
         <template v-else>
           <sidebar-nav v-if="isSidebarVisible" :nav-items="navItems" />

From 89f8ce652797081d6e46424054531df4ee5ab19a Mon Sep 17 00:00:00 2001
From: Alexander Ackermann <abackermann91@gmail.com>
Date: Fri, 17 Apr 2026 14:22:29 +0200
Subject: [PATCH 2/3] adjust new button width

---
 packages/web-runtime/src/components/SidebarNav/SidebarNav.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/web-runtime/src/components/SidebarNav/SidebarNav.vue b/packages/web-runtime/src/components/SidebarNav/SidebarNav.vue
index 423a1a1e5b..73c3c03b8e 100644
--- a/packages/web-runtime/src/components/SidebarNav/SidebarNav.vue
+++ b/packages/web-runtime/src/components/SidebarNav/SidebarNav.vue
@@ -11,7 +11,7 @@
             :disabled="isFloatingActionButtonDisabled"
             appearance="filled"
             color-role="primary"
-            class="oc-app-floating-action-button w-full h-[48px] min-w-[100px] rounded-xl shadow-md"
+            class="oc-app-floating-action-button h-[48px] w-[100px] rounded-xl shadow-md"
             @click="floatingActionButton.handler?.()"
           >
             <oc-icon :name="floatingActionButton.icon" />

From 6e9952873e17d7ecd6b676835b77beec917abacc Mon Sep 17 00:00:00 2001
From: Alexander Ackermann <abackermann91@gmail.com>
Date: Fri, 17 Apr 2026 14:23:00 +0200
Subject: [PATCH 3/3] adjust new button width

---
 packages/web-runtime/src/components/SidebarNav/SidebarNav.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/web-runtime/src/components/SidebarNav/SidebarNav.vue b/packages/web-runtime/src/components/SidebarNav/SidebarNav.vue
index 73c3c03b8e..da85132860 100644
--- a/packages/web-runtime/src/components/SidebarNav/SidebarNav.vue
+++ b/packages/web-runtime/src/components/SidebarNav/SidebarNav.vue
@@ -11,7 +11,7 @@
             :disabled="isFloatingActionButtonDisabled"
             appearance="filled"
             color-role="primary"
-            class="oc-app-floating-action-button h-[48px] w-[100px] rounded-xl shadow-md"
+            class="oc-app-floating-action-button h-[48px] min-w-[100px] rounded-xl shadow-md"
             @click="floatingActionButton.handler?.()"
           >
             <oc-icon :name="floatingActionButton.icon" />