From b4dff783a270f41f342c57c592beee47f8bb351b Mon Sep 17 00:00:00 2001
From: pancakes <trypancakes@tutanota.com>
Date: Tue, 12 Nov 2024 15:08:09 +1000
Subject: [PATCH] [frontend] Add overflow clipping to note

---
 Iceshrimp.Frontend/Components/AscendedNote.razor.css      | 1 +
 .../Components/Note/NoteComponent.razor.css               | 5 ++++-
 Iceshrimp.Frontend/Components/Note/NoteFooter.razor       | 8 ++++----
 Iceshrimp.Frontend/Components/SearchComponent.razor.css   | 1 +
 Iceshrimp.Frontend/Components/TimelineNote.razor.css      | 1 +
 Iceshrimp.Frontend/Pages/ProfileView.razor.css            | 1 +
 Iceshrimp.Frontend/Pages/SingleNote.razor.css             | 8 ++++++--
 7 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/Iceshrimp.Frontend/Components/AscendedNote.razor.css b/Iceshrimp.Frontend/Components/AscendedNote.razor.css
index 4359a507..d609c8bd 100644
--- a/Iceshrimp.Frontend/Components/AscendedNote.razor.css
+++ b/Iceshrimp.Frontend/Components/AscendedNote.razor.css
@@ -25,4 +25,5 @@
     display: flex;
     max-width: 45rem;
     width: 100%;
+    overflow: clip;
 }
\ No newline at end of file
diff --git a/Iceshrimp.Frontend/Components/Note/NoteComponent.razor.css b/Iceshrimp.Frontend/Components/Note/NoteComponent.razor.css
index b7de353f..7c9ba4ac 100644
--- a/Iceshrimp.Frontend/Components/Note/NoteComponent.razor.css
+++ b/Iceshrimp.Frontend/Components/Note/NoteComponent.razor.css
@@ -1,10 +1,13 @@
 .note-header {
     display: flex;
     padding-bottom: 0.5em;
+    position: relative;
+    z-index: 1;
 }
 
 .note-container {
-    width: 100%
+    width: 100%;
+    overflow: clip;
 }
 
 .user-avatar {
diff --git a/Iceshrimp.Frontend/Components/Note/NoteFooter.razor b/Iceshrimp.Frontend/Components/Note/NoteFooter.razor
index e6d3cd6a..d08485c8 100644
--- a/Iceshrimp.Frontend/Components/Note/NoteFooter.razor
+++ b/Iceshrimp.Frontend/Components/Note/NoteFooter.razor
@@ -18,7 +18,7 @@
             }
         </div>
     }
-    <button class="btn" @onclick="Reply" @onclick:stopPropagation="true" aria-label="reply">
+    <button class="btn positioned" @onclick="Reply" @onclick:stopPropagation="true" aria-label="reply">
         <Icon Name="Icons.ArrowUUpLeft" Size="1.3em"/>
         @if (Replies > 0)
         {
@@ -54,7 +54,7 @@
             <span class="renote-count">@Renotes</span>
         }
     </button>
-    <button @onclick="Like" @onclick:stopPropagation="true" class="btn" aria-label="like">
+    <button @onclick="Like" @onclick:stopPropagation="true" class="btn positioned" aria-label="like">
         @if (IsLiked)
         {
             <Icon Name="Icons.Heart" Pack="IconStyle.Fill" Size="1.3em"/>
@@ -68,10 +68,10 @@
             <span class="like-count">@Likes</span>
         }
     </button>
-    <button @ref="EmojiButton" class="btn" @onclick="ToggleEmojiPicker" @onclick:stopPropagation="true" aria-label="emoji picker" >
+    <button @ref="EmojiButton" class="btn positioned" @onclick="ToggleEmojiPicker" @onclick:stopPropagation="true" aria-label="emoji picker" >
         <Icon Name="Icons.Smiley" Size="1.3em"/>
     </button>
-    <button class="btn" @onclick="Quote" @onclick:stopPropagation="true" aria-label="quote">
+    <button class="btn positioned" @onclick="Quote" @onclick:stopPropagation="true" aria-label="quote">
         <Icon Name="Icons.Quotes" Size="1.3em"/>
     </button>
     <button class="btn positioned" @onclick="ToggleMenu" @onclick:stopPropagation="true" aria-label="more">
diff --git a/Iceshrimp.Frontend/Components/SearchComponent.razor.css b/Iceshrimp.Frontend/Components/SearchComponent.razor.css
index 39d9030b..9c435318 100644
--- a/Iceshrimp.Frontend/Components/SearchComponent.razor.css
+++ b/Iceshrimp.Frontend/Components/SearchComponent.razor.css
@@ -25,6 +25,7 @@
     margin-right: 0.5rem;
     margin-left: 0.5rem;
     width: 100%;
+    overflow: clip;
 }
 .wrapper {
     display: flex;
diff --git a/Iceshrimp.Frontend/Components/TimelineNote.razor.css b/Iceshrimp.Frontend/Components/TimelineNote.razor.css
index b1865cae..2de0554a 100644
--- a/Iceshrimp.Frontend/Components/TimelineNote.razor.css
+++ b/Iceshrimp.Frontend/Components/TimelineNote.razor.css
@@ -10,6 +10,7 @@
     margin-right: 0.5rem;
     margin-left: 0.5rem;
     width: 100%;
+    overflow: clip;
 }
 
 .note-indent {
diff --git a/Iceshrimp.Frontend/Pages/ProfileView.razor.css b/Iceshrimp.Frontend/Pages/ProfileView.razor.css
index fa95507b..0a28b42d 100644
--- a/Iceshrimp.Frontend/Pages/ProfileView.razor.css
+++ b/Iceshrimp.Frontend/Pages/ProfileView.razor.css
@@ -87,6 +87,7 @@
     margin-right: 0.5rem;
     margin-left: 0.5rem;
     width: 100%;
+    overflow: clip;
 }
 
 ::deep .end {
diff --git a/Iceshrimp.Frontend/Pages/SingleNote.razor.css b/Iceshrimp.Frontend/Pages/SingleNote.razor.css
index d132b8c7..43b1c47b 100644
--- a/Iceshrimp.Frontend/Pages/SingleNote.razor.css
+++ b/Iceshrimp.Frontend/Pages/SingleNote.razor.css
@@ -1,9 +1,13 @@
 .root-note {
     max-width: 45rem;
     background-color: var(--foreground-color);
-    width: 100%;
-    padding-bottom: 1rem;
+    /*width, padding and margin are a hack to make some mfm art look correct*/
+    width: calc(100% + 3rem);
+    padding: 1.5rem 1.5rem 1rem;
+    margin: -1.5rem -1.5rem 0;
     border-bottom: solid var(--highlight-color) 0.1rem;
+    overflow: clip;
+    border-radius: 0.75rem;
 }
 
 .descendants {