sort out a bunch of text overflow issues

1 files changed, 14 insertions, 1 deletions

diff --git a/static/note.css b/static/note.css
index a9cbce8..7e0f529 100644
--- a/static/note.css
+++ b/static/note.css
@@ -39,6 +39,11 @@ article.note {
   display: grid;
   grid-template-columns: max-content 1fr;
   gap: var(--spacing-double);
+  overflow: hidden;
+
+  > * {
+    min-width: 0;
+  }
 
   img.avatar {
     width: var(--avatar-size);
@@ -53,6 +58,9 @@ article.note {
   .content {
     font-size: var(--font-normal-size);
     padding: var(--spacing-half) 0;
+    hyphens: auto;
+    overflow-x: hidden;
+    text-overflow: ellipsis;
     .selected & {
       font-size: var(--font-big-size);
     }
@@ -70,15 +78,19 @@ article.note {
 
   .infoLine {
     display: grid;
-    grid-template-columns: max-content 1fr max-content max-content;
+    grid-template-columns: auto 1fr auto max-content;
     align-items: baseline;
     margin-bottom: var(--spacing-half);
     gap: var(--spacing-single);
+    max-width: 100%;
 
     .authorName {
       font-weight: bold;
       color: inherit;
       text-decoration: none;
+      text-overflow: ellipsis;
+      text-wrap: nowrap;
+      overflow: hidden;
       &:hover {
         text-decoration: underline;
       }
@@ -88,6 +100,7 @@ article.note {
       font-size: var(--font-small-size);
       text-overflow: ellipsis;
       overflow: hidden;
+      text-wrap: nowrap;
     }
     a.timestamp {
       color: inherit;