fix(webapp): user teaser (#9283)

webapp/components/UserTeaser/UserTeaser.vue

@@ -84,6 +84,8 @@ export default {
   }
 
   .info {
+    flex: 1;
+    min-width: 0;
     padding-left: 10px;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -109,6 +111,12 @@ export default {
     flex-direction: column;
     justify-content: center;
     align-items: flex-start;
+
+    > a,
+    > button,
+    > span:not(.group-info) {
+      display: contents;
+    }
   }
 
   .flex-direction-row {
@@ -127,5 +135,26 @@ export default {
       display: inline;
     }
   }
+
+  .group-info {
+    display: flex;
+    align-self: stretch;
+    align-items: baseline;
+    gap: 4px;
+    min-width: 0;
+    overflow: hidden;
+
+    > .text {
+      flex-shrink: 0;
+    }
+  }
+
+  .group-link {
+    color: $color-primary;
+    font-size: $font-size-base;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
 }
 </style>

webapp/components/UserTeaser/UserTeaserNonAnonymous.vue

@@ -27,15 +27,10 @@
             <span class="name">{{ userName }}</span>
           </user-teaser-helper>
           <span v-if="wide">&nbsp;</span>
-          <span v-if="group">
+          <span v-if="group" class="group-info">
-            <span class="text">
+            <span class="text">{{ $t('group.in') }}</span>
-              {{ $t('group.in') }}
+            <nuxt-link :to="groupLink" class="group-link" :title="groupName">
-            </span>
+              {{ groupName }}
-            <nuxt-link :to="groupLink">
-              <span class="text">
-                <span class="slug">{{ groupSlug }}</span>
-                <span v-if="!userOnly" class="name">{{ groupName }}</span>
-              </span>
             </nuxt-link>
           </span>
           <!-- eslint-disable-next-line prettier/prettier -->

webapp/pages/groups/_id/__snapshots__/_slug.spec.js.snap

@@ -225,6 +225,7 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a close
           >
             <h3
               class="ds-heading ds-heading-h3 ds-heading-align-center ds-heading-no-margin"
+              style="word-break: break-all;"
             >
               
             School For Citizens
@@ -233,6 +234,7 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a close
              
             <p
               class="ds-text ds-text-center ds-text-soft"
+              style="word-break: break-all;"
             >
               
             &school-for-citizens
@@ -535,6 +537,7 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a close
             >
               <span
                 class="os-badge inline-flex w-fit items-center gap-[0.25em] font-semibold text-[var(--color-default-contrast)] bg-[var(--color-default)] text-[0.75rem] py-[0.2em] px-[0.8em] rounded-[2em]"
+                style="word-break: break-all;"
               >
                 Our children shall receive education for life.
               </span>
@@ -1146,6 +1149,7 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a close
           >
             <h3
               class="ds-heading ds-heading-h3 ds-heading-align-center ds-heading-no-margin"
+              style="word-break: break-all;"
             >
               
             School For Citizens
@@ -1154,6 +1158,7 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a close
              
             <p
               class="ds-text ds-text-center ds-text-soft"
+              style="word-break: break-all;"
             >
               
             &school-for-citizens
@@ -1409,6 +1414,7 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a close
             >
               <span
                 class="os-badge inline-flex w-fit items-center gap-[0.25em] font-semibold text-[var(--color-default-contrast)] bg-[var(--color-default)] text-[0.75rem] py-[0.2em] px-[0.8em] rounded-[2em]"
+                style="word-break: break-all;"
               >
                 Our children shall receive education for life.
               </span>
@@ -1651,6 +1657,7 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a close
           >
             <h3
               class="ds-heading ds-heading-h3 ds-heading-align-center ds-heading-no-margin"
+              style="word-break: break-all;"
             >
               
             School For Citizens
@@ -1659,6 +1666,7 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a close
              
             <p
               class="ds-text ds-text-center ds-text-soft"
+              style="word-break: break-all;"
             >
               
             &school-for-citizens
@@ -1933,6 +1941,7 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a close
             >
               <span
                 class="os-badge inline-flex w-fit items-center gap-[0.25em] font-semibold text-[var(--color-default-contrast)] bg-[var(--color-default)] text-[0.75rem] py-[0.2em] px-[0.8em] rounded-[2em]"
+                style="word-break: break-all;"
               >
                 Our children shall receive education for life.
               </span>
@@ -2270,6 +2279,7 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a close
           >
             <h3
               class="ds-heading ds-heading-h3 ds-heading-align-center ds-heading-no-margin"
+              style="word-break: break-all;"
             >
               
             School For Citizens
@@ -2278,6 +2288,7 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a close
              
             <p
               class="ds-text ds-text-center ds-text-soft"
+              style="word-break: break-all;"
             >
               
             &school-for-citizens
@@ -2579,6 +2590,7 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a close
             >
               <span
                 class="os-badge inline-flex w-fit items-center gap-[0.25em] font-semibold text-[var(--color-default-contrast)] bg-[var(--color-default)] text-[0.75rem] py-[0.2em] px-[0.8em] rounded-[2em]"
+                style="word-break: break-all;"
               >
                 Our children shall receive education for life.
               </span>
@@ -3373,6 +3385,7 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a curre
           >
             <h3
               class="ds-heading ds-heading-h3 ds-heading-align-center ds-heading-no-margin"
+              style="word-break: break-all;"
             >
               
             Yoga Practice
@@ -3381,6 +3394,7 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a curre
              
             <p
               class="ds-text ds-text-center ds-text-soft"
+              style="word-break: break-all;"
             >
               
             &yoga-practice
@@ -4226,6 +4240,7 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a curre
           >
             <h3
               class="ds-heading ds-heading-h3 ds-heading-align-center ds-heading-no-margin"
+              style="word-break: break-all;"
             >
               
             Yoga Practice
@@ -4234,6 +4249,7 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a curre
              
             <p
               class="ds-text ds-text-center ds-text-soft"
+              style="word-break: break-all;"
             >
               
             &yoga-practice
@@ -5025,6 +5041,7 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a curre
           >
             <h3
               class="ds-heading ds-heading-h3 ds-heading-align-center ds-heading-no-margin"
+              style="word-break: break-all;"
             >
               
             Yoga Practice
@@ -5033,6 +5050,7 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a curre
              
             <p
               class="ds-text ds-text-center ds-text-soft"
+              style="word-break: break-all;"
             >
               
             &yoga-practice
@@ -5938,6 +5956,7 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a curre
           >
             <h3
               class="ds-heading ds-heading-h3 ds-heading-align-center ds-heading-no-margin"
+              style="word-break: break-all;"
             >
               
             Yoga Practice
@@ -5946,6 +5965,7 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a curre
              
             <p
               class="ds-text ds-text-center ds-text-soft"
+              style="word-break: break-all;"
             >
               
             &yoga-practice
@@ -6973,6 +6993,7 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a hidde
           >
             <h3
               class="ds-heading ds-heading-h3 ds-heading-align-center ds-heading-no-margin"
+              style="word-break: break-all;"
             >
               
             Investigative Journalism
@@ -6981,6 +7002,7 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a hidde
              
             <p
               class="ds-text ds-text-center ds-text-soft"
+              style="word-break: break-all;"
             >
               
             &investigative-journalism
@@ -7282,6 +7304,7 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a hidde
             >
               <span
                 class="os-badge inline-flex w-fit items-center gap-[0.25em] font-semibold text-[var(--color-default-contrast)] bg-[var(--color-default)] text-[0.75rem] py-[0.2em] px-[0.8em] rounded-[2em]"
+                style="word-break: break-all;"
               >
                 Investigative journalists share ideas and insights and can collaborate.
               </span>
@@ -8017,6 +8040,7 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a hidde
           >
             <h3
               class="ds-heading ds-heading-h3 ds-heading-align-center ds-heading-no-margin"
+              style="word-break: break-all;"
             >
               
             Investigative Journalism
@@ -8025,6 +8049,7 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a hidde
              
             <p
               class="ds-text ds-text-center ds-text-soft"
+              style="word-break: break-all;"
             >
               
             &investigative-journalism
@@ -8325,6 +8350,7 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a hidde
             >
               <span
                 class="os-badge inline-flex w-fit items-center gap-[0.25em] font-semibold text-[var(--color-default-contrast)] bg-[var(--color-default)] text-[0.75rem] py-[0.2em] px-[0.8em] rounded-[2em]"
+                style="word-break: break-all;"
               >
                 Investigative journalists share ideas and insights and can collaborate.
               </span>

webapp/pages/groups/_id/_slug.vue

@@ -29,11 +29,14 @@
           </client-only>
           <div class="ds-my-small">
             <!-- group name -->
-            <h3 class="ds-heading ds-heading-h3 ds-heading-align-center ds-heading-no-margin">
+            <h3
+              class="ds-heading ds-heading-h3 ds-heading-align-center ds-heading-no-margin"
+              style="word-break: break-all"
+            >
               {{ groupName }}
             </h3>
             <!-- group slug -->
-            <p class="ds-text ds-text-center ds-text-soft">
+            <p class="ds-text ds-text-center ds-text-soft" style="word-break: break-all">
               {{ `&${groupSlug}` }}
             </p>
             <!-- group location -->
@@ -160,7 +163,7 @@
               </p>
               <div class="ds-my-xx-small"></div>
               <div class="chip" align="center">
-                <os-badge>{{ group.about }}</os-badge>
+                <os-badge style="word-break: break-all">{{ group.about }}</os-badge>
               </div>
             </div>
           </template>

webapp/pages/index.vue

@@ -2,7 +2,11 @@
   <div>
     <!-- feed top row: filter (left) + create post (right) -->
     <div class="feed-top-row">
-      <div v-if="SHOW_CONTENT_FILTER_MASONRY_GRID" class="filterButtonMenu">
+      <div
+        v-if="SHOW_CONTENT_FILTER_MASONRY_GRID"
+        class="filterButtonMenu"
+        :class="{ 'hide-filter': hideByScroll }"
+      >
         <os-button
           class="my-filter-button"
           v-if="
@@ -75,7 +79,6 @@
             placement: 'left',
           }"
           class="post-add-button"
-          :class="{ 'hide-filter': hideByScroll }"
           variant="primary"
           appearance="filled"
           circle
@@ -187,7 +190,7 @@ export default {
     const { hashtag = null } = this.$route.query
     return {
       hideByScroll: false,
-      revScrollpos: 0,
+      prevScrollpos: 0,
       showFilter: false,
       developerNoAutoClosingFilterMenu: false, // stops automatic closing of filter menu for developer purposes: default is 'false'
       showDonations: false,