From 1b2c5e68b6b27a797e007beee63824ea28c352f8 Mon Sep 17 00:00:00 2001
From: Ulf Gebhardt <ulf.gebhardt@webcraft-media.de>
Date: Sat, 21 Feb 2026 18:59:01 +0100
Subject: [PATCH] fix(webapp): flex layout und spacing in profile und group
 pages (#9286)

---
 .../_id/__snapshots__/_slug.spec.js.snap      |   32 +-
 webapp/pages/groups/_id/_slug.vue             |    8 +-
 .../_id/__snapshots__/_slug.spec.js.snap      | 1160 ++++++++---------
 webapp/pages/profile/_id/_slug.vue            |   56 +-
 4 files changed, 624 insertions(+), 632 deletions(-)

diff --git a/webapp/pages/groups/_id/__snapshots__/_slug.spec.js.snap b/webapp/pages/groups/_id/__snapshots__/_slug.spec.js.snap
index 775e9098e..9aefa57fe 100644
--- a/webapp/pages/groups/_id/__snapshots__/_slug.spec.js.snap
+++ b/webapp/pages/groups/_id/__snapshots__/_slug.spec.js.snap
@@ -950,7 +950,7 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a close
         </div>
          
         <div
-          class="ds-mb-large ds-space-centered"
+          class="ds-mt-small ds-mb-small ds-space-centered"
         >
           <nuxt-link-stub
             aria-label="contribution.newPost"
@@ -986,7 +986,7 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a close
         </div>
          
         <div
-          class="ds-grid"
+          class="ds-grid ds-mt-small"
           style="grid-auto-rows: 2px; row-gap: 2px;"
         >
           <div
@@ -1491,7 +1491,7 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a close
         <!---->
          
         <div
-          class="ds-grid"
+          class="ds-grid ds-mt-small"
           style="grid-auto-rows: 2px; row-gap: 2px;"
         >
           <div
@@ -2015,7 +2015,7 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a close
         <!---->
          
         <div
-          class="ds-grid"
+          class="ds-grid ds-mt-small"
           style="grid-auto-rows: 2px; row-gap: 2px;"
         >
           <div
@@ -2994,7 +2994,7 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a close
         </div>
          
         <div
-          class="ds-mb-large ds-space-centered"
+          class="ds-mt-small ds-mb-small ds-space-centered"
         >
           <nuxt-link-stub
             aria-label="contribution.newPost"
@@ -3030,7 +3030,7 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a close
         </div>
          
         <div
-          class="ds-grid"
+          class="ds-grid ds-mt-small"
           style="grid-auto-rows: 2px; row-gap: 2px;"
         >
           <div
@@ -4030,7 +4030,7 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a curre
         </div>
          
         <div
-          class="ds-mb-large ds-space-centered"
+          class="ds-mt-small ds-mb-small ds-space-centered"
         >
           <nuxt-link-stub
             aria-label="contribution.newPost"
@@ -4066,7 +4066,7 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a curre
         </div>
          
         <div
-          class="ds-grid"
+          class="ds-grid ds-mt-small"
           style="grid-auto-rows: 2px; row-gap: 2px;"
         >
           <div
@@ -4865,7 +4865,7 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a curre
         <!---->
          
         <div
-          class="ds-grid"
+          class="ds-grid ds-mt-small"
           style="grid-auto-rows: 2px; row-gap: 2px;"
         >
           <div
@@ -5683,7 +5683,7 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a curre
         <!---->
          
         <div
-          class="ds-grid"
+          class="ds-grid ds-mt-small"
           style="grid-auto-rows: 2px; row-gap: 2px;"
         >
           <div
@@ -6594,7 +6594,7 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a curre
         </div>
          
         <div
-          class="ds-mb-large ds-space-centered"
+          class="ds-mt-small ds-mb-small ds-space-centered"
         >
           <nuxt-link-stub
             aria-label="contribution.newPost"
@@ -6630,7 +6630,7 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a curre
         </div>
          
         <div
-          class="ds-grid"
+          class="ds-grid ds-mt-small"
           style="grid-auto-rows: 2px; row-gap: 2px;"
         >
           <div
@@ -7714,7 +7714,7 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a hidde
         </div>
          
         <div
-          class="ds-mb-large ds-space-centered"
+          class="ds-mt-small ds-mb-small ds-space-centered"
         >
           <nuxt-link-stub
             aria-label="contribution.newPost"
@@ -7750,7 +7750,7 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a hidde
         </div>
          
         <div
-          class="ds-grid"
+          class="ds-grid ds-mt-small"
           style="grid-auto-rows: 2px; row-gap: 2px;"
         >
           <div
@@ -8757,7 +8757,7 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a hidde
         </div>
          
         <div
-          class="ds-mb-large ds-space-centered"
+          class="ds-mt-small ds-mb-small ds-space-centered"
         >
           <nuxt-link-stub
             aria-label="contribution.newPost"
@@ -8793,7 +8793,7 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a hidde
         </div>
          
         <div
-          class="ds-grid"
+          class="ds-grid ds-mt-small"
           style="grid-auto-rows: 2px; row-gap: 2px;"
         >
           <div
diff --git a/webapp/pages/groups/_id/_slug.vue b/webapp/pages/groups/_id/_slug.vue
index 429599266..496db9132 100644
--- a/webapp/pages/groups/_id/_slug.vue
+++ b/webapp/pages/groups/_id/_slug.vue
@@ -216,7 +216,7 @@
             </os-button>
           </os-card>
         </div>
-        <div v-if="isGroupMemberNonePending" class="ds-mb-large ds-space-centered">
+        <div v-if="isGroupMemberNonePending" class="ds-mt-small ds-mb-small ds-space-centered">
           <os-button
             as="nuxt-link"
             :to="{
@@ -238,10 +238,7 @@
             </template>
           </os-button>
         </div>
-        <masonry-grid>
-          <!-- TapNavigation -->
-          <!-- <tab-navigation :tabs="tabOptions" :activeTab="tabActive" @switch-tab="handleTab" /> -->
-
+        <masonry-grid class="ds-mt-small">
           <!-- Group post feed -->
           <template v-if="posts && posts.length">
             <masonry-grid-item
@@ -657,6 +654,7 @@ export default {
 .group-layout__main {
   flex: 0 0 100%;
   width: 100%;
+  min-width: 0;
 }
 @media #{$media-query-small} {
   .group-layout__sidebar {
diff --git a/webapp/pages/profile/_id/__snapshots__/_slug.spec.js.snap b/webapp/pages/profile/_id/__snapshots__/_slug.spec.js.snap
index e6360d7ee..8332be04d 100644
--- a/webapp/pages/profile/_id/__snapshots__/_slug.spec.js.snap
+++ b/webapp/pages/profile/_id/__snapshots__/_slug.spec.js.snap
@@ -443,137 +443,137 @@ exports[`ProfileSlug given an authenticated user given another profile user and
       <div
         class="profile-layout__main"
       >
+        <div
+          class="tab-navigation ds-mb-large"
+          style="grid-row-end: span 3; grid-column: 1 / -1;"
+        >
+          <div
+            class="ds-tab-nav os-card relative rounded-[5px] break-words bg-white shadow-[0px_12px_26px_-4px_rgba(0,0,0,0.1)] p-6 ds-tab-nav"
+          >
+            <ul
+              class="Tabs"
+            >
+              <li
+                class="Tabs__tab pointer --active"
+                data-test="post-tab"
+              >
+                <a
+                  data-test="post-tab-click"
+                >
+                  <div
+                    class="ds-my-small"
+                  >
+                    <client-only-stub
+                      placeholder="client-only.loading"
+                    >
+                      <div
+                        class="os-number flex flex-col items-center text-center"
+                      >
+                        <span
+                          class="os-number-count font-bold text-[1.5rem] tabular-nums text-center inline-block"
+                          style="min-width: 1ch;"
+                        >
+                          0
+                        </span>
+                        <span
+                          class="sr-only"
+                        >
+                          6
+                        </span>
+                        <span
+                          class="os-number-label text-[12px] text-[var(--color-text-soft)]"
+                        >
+                          common.post
+                        </span>
+                      </div>
+                    </client-only-stub>
+                  </div>
+                </a>
+              </li>
+              <li
+                class="Tabs__tab pointer"
+                data-test="comment-tab"
+              >
+                <a
+                  data-test="comment-tab-click"
+                >
+                  <div
+                    class="ds-my-small"
+                  >
+                    <client-only-stub
+                      placeholder="client-only.loading"
+                    >
+                      <div
+                        class="os-number flex flex-col items-center text-center"
+                      >
+                        <span
+                          class="os-number-count font-bold text-[1.5rem] tabular-nums text-center inline-block"
+                          style="min-width: 1ch;"
+                        >
+                          0
+                        </span>
+                        <span
+                          class="sr-only"
+                        >
+                          8
+                        </span>
+                        <span
+                          class="os-number-label text-[12px] text-[var(--color-text-soft)]"
+                        >
+                          profile.commented
+                        </span>
+                      </div>
+                    </client-only-stub>
+                  </div>
+                </a>
+              </li>
+              <li
+                class="Tabs__tab pointer"
+                data-test="shout-tab"
+              >
+                <a
+                  data-test="shout-tab-click"
+                >
+                  <div
+                    class="ds-my-small"
+                  >
+                    <client-only-stub
+                      placeholder="client-only.loading"
+                    >
+                      <div
+                        class="os-number flex flex-col items-center text-center"
+                      >
+                        <span
+                          class="os-number-count font-bold text-[1.5rem] tabular-nums text-center inline-block"
+                          style="min-width: 1ch;"
+                        >
+                          0
+                        </span>
+                        <span
+                          class="sr-only"
+                        >
+                          7
+                        </span>
+                        <span
+                          class="os-number-label text-[12px] text-[var(--color-text-soft)]"
+                        >
+                          profile.shouted
+                        </span>
+                      </div>
+                    </client-only-stub>
+                  </div>
+                </a>
+              </li>
+            </ul>
+          </div>
+        </div>
+         
+        <!---->
+         
         <div
           class="ds-grid"
           style="grid-auto-rows: 2px; row-gap: 2px;"
         >
-          <div
-            class="tab-navigation"
-            style="grid-row-end: span 3; grid-column: 1 / -1;"
-          >
-            <div
-              class="ds-tab-nav os-card relative rounded-[5px] break-words bg-white shadow-[0px_12px_26px_-4px_rgba(0,0,0,0.1)] p-6 ds-tab-nav"
-            >
-              <ul
-                class="Tabs"
-              >
-                <li
-                  class="Tabs__tab pointer --active"
-                  data-test="post-tab"
-                >
-                  <a
-                    data-test="post-tab-click"
-                  >
-                    <div
-                      class="ds-my-small"
-                    >
-                      <client-only-stub
-                        placeholder="client-only.loading"
-                      >
-                        <div
-                          class="os-number flex flex-col items-center text-center"
-                        >
-                          <span
-                            class="os-number-count font-bold text-[1.5rem] tabular-nums text-center inline-block"
-                            style="min-width: 1ch;"
-                          >
-                            0
-                          </span>
-                          <span
-                            class="sr-only"
-                          >
-                            6
-                          </span>
-                          <span
-                            class="os-number-label text-[12px] text-[var(--color-text-soft)]"
-                          >
-                            common.post
-                          </span>
-                        </div>
-                      </client-only-stub>
-                    </div>
-                  </a>
-                </li>
-                <li
-                  class="Tabs__tab pointer"
-                  data-test="comment-tab"
-                >
-                  <a
-                    data-test="comment-tab-click"
-                  >
-                    <div
-                      class="ds-my-small"
-                    >
-                      <client-only-stub
-                        placeholder="client-only.loading"
-                      >
-                        <div
-                          class="os-number flex flex-col items-center text-center"
-                        >
-                          <span
-                            class="os-number-count font-bold text-[1.5rem] tabular-nums text-center inline-block"
-                            style="min-width: 1ch;"
-                          >
-                            0
-                          </span>
-                          <span
-                            class="sr-only"
-                          >
-                            8
-                          </span>
-                          <span
-                            class="os-number-label text-[12px] text-[var(--color-text-soft)]"
-                          >
-                            profile.commented
-                          </span>
-                        </div>
-                      </client-only-stub>
-                    </div>
-                  </a>
-                </li>
-                <li
-                  class="Tabs__tab pointer"
-                  data-test="shout-tab"
-                >
-                  <a
-                    data-test="shout-tab-click"
-                  >
-                    <div
-                      class="ds-my-small"
-                    >
-                      <client-only-stub
-                        placeholder="client-only.loading"
-                      >
-                        <div
-                          class="os-number flex flex-col items-center text-center"
-                        >
-                          <span
-                            class="os-number-count font-bold text-[1.5rem] tabular-nums text-center inline-block"
-                            style="min-width: 1ch;"
-                          >
-                            0
-                          </span>
-                          <span
-                            class="sr-only"
-                          >
-                            7
-                          </span>
-                          <span
-                            class="os-number-label text-[12px] text-[var(--color-text-soft)]"
-                          >
-                            profile.shouted
-                          </span>
-                        </div>
-                      </client-only-stub>
-                    </div>
-                  </a>
-                </li>
-              </ul>
-            </div>
-          </div>
-           
-          <!---->
-           
           <div
             style="grid-row-end: span 4; grid-column: 1 / -1;"
           >
@@ -1166,137 +1166,137 @@ exports[`ProfileSlug given an authenticated user given another profile user and
       <div
         class="profile-layout__main"
       >
+        <div
+          class="tab-navigation ds-mb-large"
+          style="grid-row-end: span 3; grid-column: 1 / -1;"
+        >
+          <div
+            class="ds-tab-nav os-card relative rounded-[5px] break-words bg-white shadow-[0px_12px_26px_-4px_rgba(0,0,0,0.1)] p-6 ds-tab-nav"
+          >
+            <ul
+              class="Tabs"
+            >
+              <li
+                class="Tabs__tab pointer --active"
+                data-test="post-tab"
+              >
+                <a
+                  data-test="post-tab-click"
+                >
+                  <div
+                    class="ds-my-small"
+                  >
+                    <client-only-stub
+                      placeholder="client-only.loading"
+                    >
+                      <div
+                        class="os-number flex flex-col items-center text-center"
+                      >
+                        <span
+                          class="os-number-count font-bold text-[1.5rem] tabular-nums text-center inline-block"
+                          style="min-width: 1ch;"
+                        >
+                          0
+                        </span>
+                        <span
+                          class="sr-only"
+                        >
+                          6
+                        </span>
+                        <span
+                          class="os-number-label text-[12px] text-[var(--color-text-soft)]"
+                        >
+                          common.post
+                        </span>
+                      </div>
+                    </client-only-stub>
+                  </div>
+                </a>
+              </li>
+              <li
+                class="Tabs__tab pointer"
+                data-test="comment-tab"
+              >
+                <a
+                  data-test="comment-tab-click"
+                >
+                  <div
+                    class="ds-my-small"
+                  >
+                    <client-only-stub
+                      placeholder="client-only.loading"
+                    >
+                      <div
+                        class="os-number flex flex-col items-center text-center"
+                      >
+                        <span
+                          class="os-number-count font-bold text-[1.5rem] tabular-nums text-center inline-block"
+                          style="min-width: 1ch;"
+                        >
+                          0
+                        </span>
+                        <span
+                          class="sr-only"
+                        >
+                          8
+                        </span>
+                        <span
+                          class="os-number-label text-[12px] text-[var(--color-text-soft)]"
+                        >
+                          profile.commented
+                        </span>
+                      </div>
+                    </client-only-stub>
+                  </div>
+                </a>
+              </li>
+              <li
+                class="Tabs__tab pointer"
+                data-test="shout-tab"
+              >
+                <a
+                  data-test="shout-tab-click"
+                >
+                  <div
+                    class="ds-my-small"
+                  >
+                    <client-only-stub
+                      placeholder="client-only.loading"
+                    >
+                      <div
+                        class="os-number flex flex-col items-center text-center"
+                      >
+                        <span
+                          class="os-number-count font-bold text-[1.5rem] tabular-nums text-center inline-block"
+                          style="min-width: 1ch;"
+                        >
+                          0
+                        </span>
+                        <span
+                          class="sr-only"
+                        >
+                          7
+                        </span>
+                        <span
+                          class="os-number-label text-[12px] text-[var(--color-text-soft)]"
+                        >
+                          profile.shouted
+                        </span>
+                      </div>
+                    </client-only-stub>
+                  </div>
+                </a>
+              </li>
+            </ul>
+          </div>
+        </div>
+         
+        <!---->
+         
         <div
           class="ds-grid"
           style="grid-auto-rows: 2px; row-gap: 2px;"
         >
-          <div
-            class="tab-navigation"
-            style="grid-row-end: span 3; grid-column: 1 / -1;"
-          >
-            <div
-              class="ds-tab-nav os-card relative rounded-[5px] break-words bg-white shadow-[0px_12px_26px_-4px_rgba(0,0,0,0.1)] p-6 ds-tab-nav"
-            >
-              <ul
-                class="Tabs"
-              >
-                <li
-                  class="Tabs__tab pointer --active"
-                  data-test="post-tab"
-                >
-                  <a
-                    data-test="post-tab-click"
-                  >
-                    <div
-                      class="ds-my-small"
-                    >
-                      <client-only-stub
-                        placeholder="client-only.loading"
-                      >
-                        <div
-                          class="os-number flex flex-col items-center text-center"
-                        >
-                          <span
-                            class="os-number-count font-bold text-[1.5rem] tabular-nums text-center inline-block"
-                            style="min-width: 1ch;"
-                          >
-                            0
-                          </span>
-                          <span
-                            class="sr-only"
-                          >
-                            6
-                          </span>
-                          <span
-                            class="os-number-label text-[12px] text-[var(--color-text-soft)]"
-                          >
-                            common.post
-                          </span>
-                        </div>
-                      </client-only-stub>
-                    </div>
-                  </a>
-                </li>
-                <li
-                  class="Tabs__tab pointer"
-                  data-test="comment-tab"
-                >
-                  <a
-                    data-test="comment-tab-click"
-                  >
-                    <div
-                      class="ds-my-small"
-                    >
-                      <client-only-stub
-                        placeholder="client-only.loading"
-                      >
-                        <div
-                          class="os-number flex flex-col items-center text-center"
-                        >
-                          <span
-                            class="os-number-count font-bold text-[1.5rem] tabular-nums text-center inline-block"
-                            style="min-width: 1ch;"
-                          >
-                            0
-                          </span>
-                          <span
-                            class="sr-only"
-                          >
-                            8
-                          </span>
-                          <span
-                            class="os-number-label text-[12px] text-[var(--color-text-soft)]"
-                          >
-                            profile.commented
-                          </span>
-                        </div>
-                      </client-only-stub>
-                    </div>
-                  </a>
-                </li>
-                <li
-                  class="Tabs__tab pointer"
-                  data-test="shout-tab"
-                >
-                  <a
-                    data-test="shout-tab-click"
-                  >
-                    <div
-                      class="ds-my-small"
-                    >
-                      <client-only-stub
-                        placeholder="client-only.loading"
-                      >
-                        <div
-                          class="os-number flex flex-col items-center text-center"
-                        >
-                          <span
-                            class="os-number-count font-bold text-[1.5rem] tabular-nums text-center inline-block"
-                            style="min-width: 1ch;"
-                          >
-                            0
-                          </span>
-                          <span
-                            class="sr-only"
-                          >
-                            7
-                          </span>
-                          <span
-                            class="os-number-label text-[12px] text-[var(--color-text-soft)]"
-                          >
-                            profile.shouted
-                          </span>
-                        </div>
-                      </client-only-stub>
-                    </div>
-                  </a>
-                </li>
-              </ul>
-            </div>
-          </div>
-           
-          <!---->
-           
           <div
             style="grid-row-end: span 4; grid-column: 1 / -1;"
           >
@@ -1713,175 +1713,171 @@ exports[`ProfileSlug given an authenticated user given the logged in user as pro
       <div
         class="profile-layout__main"
       >
+        <div
+          class="tab-navigation ds-mb-large"
+          style="grid-row-end: span 3; grid-column: 1 / -1;"
+        >
+          <div
+            class="ds-tab-nav os-card relative rounded-[5px] break-words bg-white shadow-[0px_12px_26px_-4px_rgba(0,0,0,0.1)] p-6 ds-tab-nav"
+          >
+            <ul
+              class="Tabs"
+            >
+              <li
+                class="Tabs__tab pointer --active"
+                data-test="post-tab"
+              >
+                <a
+                  data-test="post-tab-click"
+                >
+                  <div
+                    class="ds-my-small"
+                  >
+                    <client-only-stub
+                      placeholder="client-only.loading"
+                    >
+                      <div
+                        class="os-number flex flex-col items-center text-center"
+                      >
+                        <span
+                          class="os-number-count font-bold text-[1.5rem] tabular-nums text-center inline-block"
+                          style="min-width: 1ch;"
+                        >
+                          0
+                        </span>
+                        <span
+                          class="sr-only"
+                        >
+                          6
+                        </span>
+                        <span
+                          class="os-number-label text-[12px] text-[var(--color-text-soft)]"
+                        >
+                          common.post
+                        </span>
+                      </div>
+                    </client-only-stub>
+                  </div>
+                </a>
+              </li>
+              <li
+                class="Tabs__tab pointer"
+                data-test="comment-tab"
+              >
+                <a
+                  data-test="comment-tab-click"
+                >
+                  <div
+                    class="ds-my-small"
+                  >
+                    <client-only-stub
+                      placeholder="client-only.loading"
+                    >
+                      <div
+                        class="os-number flex flex-col items-center text-center"
+                      >
+                        <span
+                          class="os-number-count font-bold text-[1.5rem] tabular-nums text-center inline-block"
+                          style="min-width: 1ch;"
+                        >
+                          0
+                        </span>
+                        <span
+                          class="sr-only"
+                        >
+                          8
+                        </span>
+                        <span
+                          class="os-number-label text-[12px] text-[var(--color-text-soft)]"
+                        >
+                          profile.commented
+                        </span>
+                      </div>
+                    </client-only-stub>
+                  </div>
+                </a>
+              </li>
+              <li
+                class="Tabs__tab pointer"
+                data-test="shout-tab"
+              >
+                <a
+                  data-test="shout-tab-click"
+                >
+                  <div
+                    class="ds-my-small"
+                  >
+                    <client-only-stub
+                      placeholder="client-only.loading"
+                    >
+                      <div
+                        class="os-number flex flex-col items-center text-center"
+                      >
+                        <span
+                          class="os-number-count font-bold text-[1.5rem] tabular-nums text-center inline-block"
+                          style="min-width: 1ch;"
+                        >
+                          0
+                        </span>
+                        <span
+                          class="sr-only"
+                        >
+                          7
+                        </span>
+                        <span
+                          class="os-number-label text-[12px] text-[var(--color-text-soft)]"
+                        >
+                          profile.shouted
+                        </span>
+                      </div>
+                    </client-only-stub>
+                  </div>
+                </a>
+              </li>
+            </ul>
+          </div>
+        </div>
+         
+        <div
+          class="profile-post-add-button-container"
+        >
+          <nuxt-link-stub
+            aria-label="contribution.newPost"
+            class="profile-post-add-button os-button inline-flex items-center justify-center [white-space-collapse:collapse] relative appearance-none font-semibold tracking-[0.05em] transition-[color,background-color] duration-[80ms] ease-[cubic-bezier(0.25,0.46,0.45,0.94)] cursor-pointer select-none border-[0.8px] border-solid focus:outline-1 disabled:pointer-events-none disabled:cursor-default focus:outline-dashed focus:outline-[var(--color-primary)] shadow-[inset_0_0_0_1px_rgba(0,0,0,0.05)] disabled:bg-[var(--color-disabled)] disabled:text-[var(--color-disabled-contrast)] disabled:border-[var(--color-disabled)] disabled:shadow-[inset_0_0_0_1px_transparent] h-[36px] min-w-[36px] text-[15px] leading-[normal] align-middle bg-[var(--color-primary)] text-[var(--color-primary-contrast)] border-[var(--color-primary)] hover:bg-[var(--color-primary-hover)] hover:border-[var(--color-primary-hover)] hover:text-[var(--color-primary-contrast)] active:bg-[var(--color-primary-active)] active:border-[var(--color-primary-active)] active:text-[var(--color-primary-contrast)] rounded-full p-0 w-[36px] profile-post-add-button has-tooltip"
+            data-appearance="filled"
+            data-original-title="null"
+            data-variant="primary"
+            to="[object Object]"
+          >
+            <span
+              class="inline-flex items-center"
+            >
+              <span
+                class="os-button__icon inline-flex items-center shrink-0 h-[1.2em] [&>svg]:h-full [&>svg]:w-auto [&>svg]:fill-current"
+              >
+                <span
+                  aria-hidden="true"
+                  class="os-icon inline-flex items-center align-bottom shrink-0 h-[1.2em] [&>svg]:h-full [&>svg]:w-auto [&>svg]:fill-current"
+                >
+                  <svg
+                    fill="currentColor"
+                    viewBox="0 0 32 32"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M15 5h2v10h10v2h-10v10h-2v-10h-10v-2h10v-10z"
+                    />
+                  </svg>
+                </span>
+              </span>
+            </span>
+          </nuxt-link-stub>
+        </div>
+         
         <div
           class="ds-grid"
           style="grid-auto-rows: 2px; row-gap: 2px;"
         >
-          <div
-            class="tab-navigation"
-            style="grid-row-end: span 3; grid-column: 1 / -1;"
-          >
-            <div
-              class="ds-tab-nav os-card relative rounded-[5px] break-words bg-white shadow-[0px_12px_26px_-4px_rgba(0,0,0,0.1)] p-6 ds-tab-nav"
-            >
-              <ul
-                class="Tabs"
-              >
-                <li
-                  class="Tabs__tab pointer --active"
-                  data-test="post-tab"
-                >
-                  <a
-                    data-test="post-tab-click"
-                  >
-                    <div
-                      class="ds-my-small"
-                    >
-                      <client-only-stub
-                        placeholder="client-only.loading"
-                      >
-                        <div
-                          class="os-number flex flex-col items-center text-center"
-                        >
-                          <span
-                            class="os-number-count font-bold text-[1.5rem] tabular-nums text-center inline-block"
-                            style="min-width: 1ch;"
-                          >
-                            0
-                          </span>
-                          <span
-                            class="sr-only"
-                          >
-                            6
-                          </span>
-                          <span
-                            class="os-number-label text-[12px] text-[var(--color-text-soft)]"
-                          >
-                            common.post
-                          </span>
-                        </div>
-                      </client-only-stub>
-                    </div>
-                  </a>
-                </li>
-                <li
-                  class="Tabs__tab pointer"
-                  data-test="comment-tab"
-                >
-                  <a
-                    data-test="comment-tab-click"
-                  >
-                    <div
-                      class="ds-my-small"
-                    >
-                      <client-only-stub
-                        placeholder="client-only.loading"
-                      >
-                        <div
-                          class="os-number flex flex-col items-center text-center"
-                        >
-                          <span
-                            class="os-number-count font-bold text-[1.5rem] tabular-nums text-center inline-block"
-                            style="min-width: 1ch;"
-                          >
-                            0
-                          </span>
-                          <span
-                            class="sr-only"
-                          >
-                            8
-                          </span>
-                          <span
-                            class="os-number-label text-[12px] text-[var(--color-text-soft)]"
-                          >
-                            profile.commented
-                          </span>
-                        </div>
-                      </client-only-stub>
-                    </div>
-                  </a>
-                </li>
-                <li
-                  class="Tabs__tab pointer"
-                  data-test="shout-tab"
-                >
-                  <a
-                    data-test="shout-tab-click"
-                  >
-                    <div
-                      class="ds-my-small"
-                    >
-                      <client-only-stub
-                        placeholder="client-only.loading"
-                      >
-                        <div
-                          class="os-number flex flex-col items-center text-center"
-                        >
-                          <span
-                            class="os-number-count font-bold text-[1.5rem] tabular-nums text-center inline-block"
-                            style="min-width: 1ch;"
-                          >
-                            0
-                          </span>
-                          <span
-                            class="sr-only"
-                          >
-                            7
-                          </span>
-                          <span
-                            class="os-number-label text-[12px] text-[var(--color-text-soft)]"
-                          >
-                            profile.shouted
-                          </span>
-                        </div>
-                      </client-only-stub>
-                    </div>
-                  </a>
-                </li>
-              </ul>
-            </div>
-          </div>
-           
-          <div
-            style="grid-row-end: span 2; grid-column: 1 / -1;"
-          >
-            <div
-              class="profile-post-add-button-container"
-            >
-              <nuxt-link-stub
-                aria-label="contribution.newPost"
-                class="profile-post-add-button os-button inline-flex items-center justify-center [white-space-collapse:collapse] relative appearance-none font-semibold tracking-[0.05em] transition-[color,background-color] duration-[80ms] ease-[cubic-bezier(0.25,0.46,0.45,0.94)] cursor-pointer select-none border-[0.8px] border-solid focus:outline-1 disabled:pointer-events-none disabled:cursor-default focus:outline-dashed focus:outline-[var(--color-primary)] shadow-[inset_0_0_0_1px_rgba(0,0,0,0.05)] disabled:bg-[var(--color-disabled)] disabled:text-[var(--color-disabled-contrast)] disabled:border-[var(--color-disabled)] disabled:shadow-[inset_0_0_0_1px_transparent] h-[36px] min-w-[36px] text-[15px] leading-[normal] align-middle bg-[var(--color-primary)] text-[var(--color-primary-contrast)] border-[var(--color-primary)] hover:bg-[var(--color-primary-hover)] hover:border-[var(--color-primary-hover)] hover:text-[var(--color-primary-contrast)] active:bg-[var(--color-primary-active)] active:border-[var(--color-primary-active)] active:text-[var(--color-primary-contrast)] rounded-full p-0 w-[36px] profile-post-add-button has-tooltip"
-                data-appearance="filled"
-                data-original-title="null"
-                data-variant="primary"
-                to="[object Object]"
-              >
-                <span
-                  class="inline-flex items-center"
-                >
-                  <span
-                    class="os-button__icon inline-flex items-center shrink-0 h-[1.2em] [&>svg]:h-full [&>svg]:w-auto [&>svg]:fill-current"
-                  >
-                    <span
-                      aria-hidden="true"
-                      class="os-icon inline-flex items-center align-bottom shrink-0 h-[1.2em] [&>svg]:h-full [&>svg]:w-auto [&>svg]:fill-current"
-                    >
-                      <svg
-                        fill="currentColor"
-                        viewBox="0 0 32 32"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M15 5h2v10h10v2h-10v10h-2v-10h-10v-2h10v-10z"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </span>
-              </nuxt-link-stub>
-            </div>
-          </div>
-           
           <div
             style="grid-row-end: span 4; grid-column: 1 / -1;"
           >
@@ -2339,175 +2335,171 @@ exports[`ProfileSlug given an authenticated user given the logged in user as pro
       <div
         class="profile-layout__main"
       >
+        <div
+          class="tab-navigation ds-mb-large"
+          style="grid-row-end: span 3; grid-column: 1 / -1;"
+        >
+          <div
+            class="ds-tab-nav os-card relative rounded-[5px] break-words bg-white shadow-[0px_12px_26px_-4px_rgba(0,0,0,0.1)] p-6 ds-tab-nav"
+          >
+            <ul
+              class="Tabs"
+            >
+              <li
+                class="Tabs__tab pointer --active"
+                data-test="post-tab"
+              >
+                <a
+                  data-test="post-tab-click"
+                >
+                  <div
+                    class="ds-my-small"
+                  >
+                    <client-only-stub
+                      placeholder="client-only.loading"
+                    >
+                      <div
+                        class="os-number flex flex-col items-center text-center"
+                      >
+                        <span
+                          class="os-number-count font-bold text-[1.5rem] tabular-nums text-center inline-block"
+                          style="min-width: 1ch;"
+                        >
+                          0
+                        </span>
+                        <span
+                          class="sr-only"
+                        >
+                          6
+                        </span>
+                        <span
+                          class="os-number-label text-[12px] text-[var(--color-text-soft)]"
+                        >
+                          common.post
+                        </span>
+                      </div>
+                    </client-only-stub>
+                  </div>
+                </a>
+              </li>
+              <li
+                class="Tabs__tab pointer"
+                data-test="comment-tab"
+              >
+                <a
+                  data-test="comment-tab-click"
+                >
+                  <div
+                    class="ds-my-small"
+                  >
+                    <client-only-stub
+                      placeholder="client-only.loading"
+                    >
+                      <div
+                        class="os-number flex flex-col items-center text-center"
+                      >
+                        <span
+                          class="os-number-count font-bold text-[1.5rem] tabular-nums text-center inline-block"
+                          style="min-width: 1ch;"
+                        >
+                          0
+                        </span>
+                        <span
+                          class="sr-only"
+                        >
+                          8
+                        </span>
+                        <span
+                          class="os-number-label text-[12px] text-[var(--color-text-soft)]"
+                        >
+                          profile.commented
+                        </span>
+                      </div>
+                    </client-only-stub>
+                  </div>
+                </a>
+              </li>
+              <li
+                class="Tabs__tab pointer"
+                data-test="shout-tab"
+              >
+                <a
+                  data-test="shout-tab-click"
+                >
+                  <div
+                    class="ds-my-small"
+                  >
+                    <client-only-stub
+                      placeholder="client-only.loading"
+                    >
+                      <div
+                        class="os-number flex flex-col items-center text-center"
+                      >
+                        <span
+                          class="os-number-count font-bold text-[1.5rem] tabular-nums text-center inline-block"
+                          style="min-width: 1ch;"
+                        >
+                          0
+                        </span>
+                        <span
+                          class="sr-only"
+                        >
+                          7
+                        </span>
+                        <span
+                          class="os-number-label text-[12px] text-[var(--color-text-soft)]"
+                        >
+                          profile.shouted
+                        </span>
+                      </div>
+                    </client-only-stub>
+                  </div>
+                </a>
+              </li>
+            </ul>
+          </div>
+        </div>
+         
+        <div
+          class="profile-post-add-button-container"
+        >
+          <nuxt-link-stub
+            aria-label="contribution.newPost"
+            class="profile-post-add-button os-button inline-flex items-center justify-center [white-space-collapse:collapse] relative appearance-none font-semibold tracking-[0.05em] transition-[color,background-color] duration-[80ms] ease-[cubic-bezier(0.25,0.46,0.45,0.94)] cursor-pointer select-none border-[0.8px] border-solid focus:outline-1 disabled:pointer-events-none disabled:cursor-default focus:outline-dashed focus:outline-[var(--color-primary)] shadow-[inset_0_0_0_1px_rgba(0,0,0,0.05)] disabled:bg-[var(--color-disabled)] disabled:text-[var(--color-disabled-contrast)] disabled:border-[var(--color-disabled)] disabled:shadow-[inset_0_0_0_1px_transparent] h-[36px] min-w-[36px] text-[15px] leading-[normal] align-middle bg-[var(--color-primary)] text-[var(--color-primary-contrast)] border-[var(--color-primary)] hover:bg-[var(--color-primary-hover)] hover:border-[var(--color-primary-hover)] hover:text-[var(--color-primary-contrast)] active:bg-[var(--color-primary-active)] active:border-[var(--color-primary-active)] active:text-[var(--color-primary-contrast)] rounded-full p-0 w-[36px] profile-post-add-button has-tooltip"
+            data-appearance="filled"
+            data-original-title="null"
+            data-variant="primary"
+            to="[object Object]"
+          >
+            <span
+              class="inline-flex items-center"
+            >
+              <span
+                class="os-button__icon inline-flex items-center shrink-0 h-[1.2em] [&>svg]:h-full [&>svg]:w-auto [&>svg]:fill-current"
+              >
+                <span
+                  aria-hidden="true"
+                  class="os-icon inline-flex items-center align-bottom shrink-0 h-[1.2em] [&>svg]:h-full [&>svg]:w-auto [&>svg]:fill-current"
+                >
+                  <svg
+                    fill="currentColor"
+                    viewBox="0 0 32 32"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M15 5h2v10h10v2h-10v10h-2v-10h-10v-2h10v-10z"
+                    />
+                  </svg>
+                </span>
+              </span>
+            </span>
+          </nuxt-link-stub>
+        </div>
+         
         <div
           class="ds-grid"
           style="grid-auto-rows: 2px; row-gap: 2px;"
         >
-          <div
-            class="tab-navigation"
-            style="grid-row-end: span 3; grid-column: 1 / -1;"
-          >
-            <div
-              class="ds-tab-nav os-card relative rounded-[5px] break-words bg-white shadow-[0px_12px_26px_-4px_rgba(0,0,0,0.1)] p-6 ds-tab-nav"
-            >
-              <ul
-                class="Tabs"
-              >
-                <li
-                  class="Tabs__tab pointer --active"
-                  data-test="post-tab"
-                >
-                  <a
-                    data-test="post-tab-click"
-                  >
-                    <div
-                      class="ds-my-small"
-                    >
-                      <client-only-stub
-                        placeholder="client-only.loading"
-                      >
-                        <div
-                          class="os-number flex flex-col items-center text-center"
-                        >
-                          <span
-                            class="os-number-count font-bold text-[1.5rem] tabular-nums text-center inline-block"
-                            style="min-width: 1ch;"
-                          >
-                            0
-                          </span>
-                          <span
-                            class="sr-only"
-                          >
-                            6
-                          </span>
-                          <span
-                            class="os-number-label text-[12px] text-[var(--color-text-soft)]"
-                          >
-                            common.post
-                          </span>
-                        </div>
-                      </client-only-stub>
-                    </div>
-                  </a>
-                </li>
-                <li
-                  class="Tabs__tab pointer"
-                  data-test="comment-tab"
-                >
-                  <a
-                    data-test="comment-tab-click"
-                  >
-                    <div
-                      class="ds-my-small"
-                    >
-                      <client-only-stub
-                        placeholder="client-only.loading"
-                      >
-                        <div
-                          class="os-number flex flex-col items-center text-center"
-                        >
-                          <span
-                            class="os-number-count font-bold text-[1.5rem] tabular-nums text-center inline-block"
-                            style="min-width: 1ch;"
-                          >
-                            0
-                          </span>
-                          <span
-                            class="sr-only"
-                          >
-                            8
-                          </span>
-                          <span
-                            class="os-number-label text-[12px] text-[var(--color-text-soft)]"
-                          >
-                            profile.commented
-                          </span>
-                        </div>
-                      </client-only-stub>
-                    </div>
-                  </a>
-                </li>
-                <li
-                  class="Tabs__tab pointer"
-                  data-test="shout-tab"
-                >
-                  <a
-                    data-test="shout-tab-click"
-                  >
-                    <div
-                      class="ds-my-small"
-                    >
-                      <client-only-stub
-                        placeholder="client-only.loading"
-                      >
-                        <div
-                          class="os-number flex flex-col items-center text-center"
-                        >
-                          <span
-                            class="os-number-count font-bold text-[1.5rem] tabular-nums text-center inline-block"
-                            style="min-width: 1ch;"
-                          >
-                            0
-                          </span>
-                          <span
-                            class="sr-only"
-                          >
-                            7
-                          </span>
-                          <span
-                            class="os-number-label text-[12px] text-[var(--color-text-soft)]"
-                          >
-                            profile.shouted
-                          </span>
-                        </div>
-                      </client-only-stub>
-                    </div>
-                  </a>
-                </li>
-              </ul>
-            </div>
-          </div>
-           
-          <div
-            style="grid-row-end: span 2; grid-column: 1 / -1;"
-          >
-            <div
-              class="profile-post-add-button-container"
-            >
-              <nuxt-link-stub
-                aria-label="contribution.newPost"
-                class="profile-post-add-button os-button inline-flex items-center justify-center [white-space-collapse:collapse] relative appearance-none font-semibold tracking-[0.05em] transition-[color,background-color] duration-[80ms] ease-[cubic-bezier(0.25,0.46,0.45,0.94)] cursor-pointer select-none border-[0.8px] border-solid focus:outline-1 disabled:pointer-events-none disabled:cursor-default focus:outline-dashed focus:outline-[var(--color-primary)] shadow-[inset_0_0_0_1px_rgba(0,0,0,0.05)] disabled:bg-[var(--color-disabled)] disabled:text-[var(--color-disabled-contrast)] disabled:border-[var(--color-disabled)] disabled:shadow-[inset_0_0_0_1px_transparent] h-[36px] min-w-[36px] text-[15px] leading-[normal] align-middle bg-[var(--color-primary)] text-[var(--color-primary-contrast)] border-[var(--color-primary)] hover:bg-[var(--color-primary-hover)] hover:border-[var(--color-primary-hover)] hover:text-[var(--color-primary-contrast)] active:bg-[var(--color-primary-active)] active:border-[var(--color-primary-active)] active:text-[var(--color-primary-contrast)] rounded-full p-0 w-[36px] profile-post-add-button has-tooltip"
-                data-appearance="filled"
-                data-original-title="null"
-                data-variant="primary"
-                to="[object Object]"
-              >
-                <span
-                  class="inline-flex items-center"
-                >
-                  <span
-                    class="os-button__icon inline-flex items-center shrink-0 h-[1.2em] [&>svg]:h-full [&>svg]:w-auto [&>svg]:fill-current"
-                  >
-                    <span
-                      aria-hidden="true"
-                      class="os-icon inline-flex items-center align-bottom shrink-0 h-[1.2em] [&>svg]:h-full [&>svg]:w-auto [&>svg]:fill-current"
-                    >
-                      <svg
-                        fill="currentColor"
-                        viewBox="0 0 32 32"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M15 5h2v10h10v2h-10v10h-2v-10h-10v-2h10v-10z"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </span>
-              </nuxt-link-stub>
-            </div>
-          </div>
-           
           <div
             style="grid-row-end: span 4; grid-column: 1 / -1;"
           >
diff --git a/webapp/pages/profile/_id/_slug.vue b/webapp/pages/profile/_id/_slug.vue
index 3ea66c19d..d6e361b2f 100644
--- a/webapp/pages/profile/_id/_slug.vue
+++ b/webapp/pages/profile/_id/_slug.vue
@@ -135,33 +135,34 @@
       </div>
 
       <div class="profile-layout__main">
+        <tab-navigation
+          :tabs="tabOptions"
+          :activeTab="tabActive"
+          class="ds-mb-large"
+          @switch-tab="handleTab"
+        />
+
+        <div v-if="myProfile" class="profile-post-add-button-container">
+          <os-button
+            as="nuxt-link"
+            :to="{ name: 'post-create-type' }"
+            v-tooltip="{
+              content: $t('contribution.newPost'),
+              placement: 'left',
+            }"
+            class="profile-post-add-button"
+            variant="primary"
+            appearance="filled"
+            circle
+            :aria-label="$t('contribution.newPost')"
+          >
+            <template #icon>
+              <os-icon :icon="icons.plus" />
+            </template>
+          </os-button>
+        </div>
+
         <masonry-grid>
-          <!-- TapNavigation -->
-          <tab-navigation :tabs="tabOptions" :activeTab="tabActive" @switch-tab="handleTab" />
-
-          <!-- feed -->
-          <div v-if="myProfile" style="grid-row-end: span 2; grid-column: 1 / -1">
-            <div class="profile-post-add-button-container">
-              <os-button
-                as="nuxt-link"
-                :to="{ name: 'post-create-type' }"
-                v-tooltip="{
-                  content: $t('contribution.newPost'),
-                  placement: 'left',
-                }"
-                class="profile-post-add-button"
-                variant="primary"
-                appearance="filled"
-                circle
-                :aria-label="$t('contribution.newPost')"
-              >
-                <template #icon>
-                  <os-icon :icon="icons.plus" />
-                </template>
-              </os-button>
-            </div>
-          </div>
-
           <template v-if="posts.length">
             <masonry-grid-item
               v-for="post in posts"
@@ -505,6 +506,7 @@ export default {
 .profile-layout__main {
   flex: 0 0 100%;
   width: 100%;
+  min-width: 0;
 }
 @media #{$media-query-small} {
   .profile-layout__sidebar {
@@ -533,7 +535,7 @@ export default {
 .profile-post-add-button-container {
   display: flex;
   justify-content: center;
-  padding: $space-x-small 0;
+  margin: $space-small 0;
 }
 .profile-post-add-button {
   box-shadow: $box-shadow-x-large !important;