fix(checkin): adds ellipsis and disable wrap

Author: dvcol

src/components/container/ContainerComponent.ce.vue

@@ -249,8 +249,8 @@ onBeforeMount(() => addCustomProgressProperty());
   &:hover {
     background: var(--custom-bg-color-hover, var(--bg-black-90));
     // stylelint-disable-next-line property-no-vendor-prefix -- necessary for safari
-    -webkit-backdrop-filter: var(--custom-bg-blur-hover, var(--bg-blur-hover));
-    backdrop-filter: var(--custom-bg-blur-hover, var(--bg-blur-hover));
+    -webkit-backdrop-filter: blur(var(--custom-bg-blur-hover, var(--bg-blur-hover)));
+    backdrop-filter: blur(var(--custom-bg-blur-hover, var(--bg-blur-hover)));
   }
 
   @media (prefers-color-scheme: light) {

src/components/views/checkin/CheckinComponent.vue

@@ -151,16 +151,16 @@ const onClick = () => {
         <NIcon class="icon" :component="icon" />
         <div class="column">
           <div class="top">
-            <span class="text primary">{{ title }}</span>
+            <span class="text primary ellipsis">{{ title }}</span>
             <span class="text tertiary compact">—</span>
-            <span class="text secondary compact">{{ subtitle }}</span>
+            <span class="text secondary compact ellipsis">{{ subtitle }}</span>
             <template v-if="episode">
               <span class="text tertiary">—</span>
-              <span class="text secondary">{{ episode }}</span>
+              <span class="text secondary ellipsis">{{ episode }}</span>
             </template>
           </div>
           <div v-if="!isTiny" class="bottom">
-            <span class="tertiary">
+            <span class="tertiary ellipsis">
               {{ type }} {{ action }} {{ i18n('at') }} {{ started }}
             </span>
           </div>
@@ -199,13 +199,16 @@ const onClick = () => {
 
 .wrapper {
   position: relative;
+  backdrop-filter: blur(var(--bg-blur-4));
+  transition: backdrop-filter 0.5s var(--n-bezier);
+
+  &:active,
+  &:hover {
+    backdrop-filter: blur(var(--bg-blur-10));
+  }
 
   .background {
-    @include mixin.hover-background(
-      $from: var(--bg-trakt-50),
-      $to: var(--bg-trakt-60),
-      $blur-hover: var(--bg-blur-10)
-    );
+    @include mixin.hover-background($from: var(--bg-trakt-50), $to: var(--bg-trakt-60));
 
     position: absolute;
     top: 0;
@@ -218,8 +221,7 @@ const onClick = () => {
   .container {
     @include mixin.hover-background(
       $from: var(--bg-trakt-dark-50),
-      $to: var(--bg-trakt-dark-60),
-      $blur-hover: var(--bg-blur-10)
+      $to: var(--bg-trakt-dark-60)
     );
 
     position: relative;
@@ -239,25 +241,43 @@ const onClick = () => {
       height: 100%;
     }
 
+    .left,
+    .column {
+      overflow: hidden;
+    }
+
     .left,
     .right,
     .top,
     .bottom {
       display: flex;
       gap: 0.25rem;
       align-items: center;
+      white-space: nowrap;
       transition: gap 0.5s var(--n-bezier);
     }
 
+    .top,
+    .bottom {
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
     .left {
       flex: 1 1 auto;
     }
 
+    .ellipsis {
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
     .column {
       display: flex;
       flex: 1 1 auto;
       flex-direction: column;
       gap: 0.125rem;
+      padding-right: 0.5rem;
     }
 
     .bottom {
@@ -304,6 +324,7 @@ const onClick = () => {
     }
 
     .tertiary {
+      overflow: hidden;
       color: var(--white-70);
     }
 

src/styles/base.scss

@@ -48,7 +48,10 @@
 
   /* background color variables */
   --bg-blur: 1px;
+  --bg-blur-2: 2px;
   --bg-blur-4: 4px;
+  --bg-blur-6: 6px;
+  --bg-blur-10: 10px;
   --bg-blur-20: 20px;
   --bg-blur-40: 40px;
   --bg-blur-hover: var(--bg-blur-20);

src/utils/watching.utils.ts

@@ -68,7 +68,7 @@ export const useCancelWatching = (cancel: () => unknown, action: TraktWatching['
         style: {
           width: '20rem',
           background: 'var(--bg-black-80)',
-          backdropFilter: 'var(--bg-blur-10)',
+          backdropFilter: 'blur(var(--bg-blur-4))',
           whiteSpace: 'pre-line',
         },
         positiveButtonProps: {