From 690845c2af1a46d1209789fe8d7d683b81b91330 Mon Sep 17 00:00:00 2001
From: Isaac Freund <mail@isaacfreund.com>
Date: Sun, 2 Jan 2022 19:24:09 +0000
Subject: [PATCH] Better handle long topics on small screen sizes

Currently long topics will cause the buffer header to take up an
arbitrarily large percentage of the screen on mobile. Additionaly, long
words like URLS are not broken and may cause the buffer header to extend
outside of the viewport in the x direction, rendering the buffer content
unreadable.

This patch fixes these two issues by limiting the buffer header size to
20% of the viewport and breaking long words such as URLs if they would
overflow.

Fixes: https://todo.sr.ht/~emersion/gamja/129
---
 style.css | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/style.css b/style.css
index 014ae96..7835fdb 100644
--- a/style.css
+++ b/style.css
@@ -202,6 +202,9 @@ button.danger:hover {
 	padding: 5px 10px;
 	grid-row: 2;
 	grid-column: 1;
+	max-height: 20vh;
+	overflow-y: auto;
+	word-break: break-word;
 }
 
 #buffer-header .actions {