From f7a635439912ffdd5f497cc62653367efa691736 Mon Sep 17 00:00:00 2001
From: Raphael Wickihalder <raphael.wickihalder@odysee.com>
Date: Mon, 4 Apr 2022 21:00:16 +0200
Subject: [PATCH] Fix handle overflow

---
 ui/scss/component/_claim-list.scss | 13 ------------
 ui/scss/component/_main.scss       | 33 ++++++++++++++++++++++++++++++
 2 files changed, 33 insertions(+), 13 deletions(-)

diff --git a/ui/scss/component/_claim-list.scss b/ui/scss/component/_claim-list.scss
index 4dc7af9ea..ab1f59fd2 100644
--- a/ui/scss/component/_claim-list.scss
+++ b/ui/scss/component/_claim-list.scss
@@ -220,21 +220,8 @@
     .claim-preview-metadata {
       .claim-tile__info {
         .media__subtitle {
-          width: calc(100% - 2.1rem);
           .button {
             display: inline;
-            .button__content {
-              width: 100%;
-              .channel-name {
-                width: 100%;
-                p {
-                  width: 99%;
-                  white-space: nowrap;
-                  overflow: hidden;
-                  text-overflow: ellipsis;
-                }
-              }
-            }
           }
           span:not(.channel-name) {
             font-size: var(--font-xsmall);
diff --git a/ui/scss/component/_main.scss b/ui/scss/component/_main.scss
index c5980e641..dab1e1b6d 100644
--- a/ui/scss/component/_main.scss
+++ b/ui/scss/component/_main.scss
@@ -1136,6 +1136,39 @@ body {
       width: unset; // It was being set to '100%' at the base level.
     }
   }
+
+  .claim-preview {
+    .claim-preview__text {
+      overflow: hidden;
+    }
+    .claim-preview-metadata {
+      .claim-tile__info {
+        .media__subtitle {
+          width: calc(100% - 2.1rem);
+          .button {
+            display: inline;
+            @media (max-width: $breakpoint-small) {
+              .button__content {
+                width: 100%;
+                .channel-name {
+                  width: 100%;
+                  p {
+                    width: 99%;
+                    white-space: nowrap;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                  }
+                }
+              }
+            }
+          }
+          span:not(.channel-name) {
+            font-size: var(--font-xsmall);
+          }
+        }
+      }
+    }
+  }
 }
 
 // Temp hacks until 'section__actions--no-margin' is generic again.