From 6c3cdf79ebde45d996dccbdae5c34325dc25cbf9 Mon Sep 17 00:00:00 2001
From: Damien De Paoli <ddp@depaoli.id.au>
Date: Tue, 22 Jun 2021 21:06:24 +1000
Subject: [PATCH] force the figcaption to break long words (even without
 spaces)

---
 templates/base.html  | 10 ++++++++++
 templates/files.html |  2 +-
 2 files changed, 11 insertions(+), 1 deletion(-)
diff --git a/templates/base.html b/templates/base.html
index 64e9bd6..f083d17 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -24,6 +24,16 @@
         <style>
         .highlight { box-shadow: 0 0 7px 4px #5bc0de }
         .sm-txt { font-size: 0.8rem }
+
+        /* used to force the figcaption to break long words (even without spaces) */
+        figure { display: table; }
+        figcaption {
+            display: table-caption;
+            overflow-wrap: break-word;
+            word-wrap: break-word;
+            word-break: break-word;
+            caption-side: bottom;
+        }
         </style>
 	</head>
 	<body>
diff --git a/templates/files.html b/templates/files.html
index 15f103d..a090989 100644
--- a/templates/files.html
+++ b/templates/files.html
@@ -212,7 +212,7 @@
                     {% if dirname| TopLevelFolderOf(cwd) %}
                         <figure class="px-1 dir" dir="{{dirname}}">
                             <i style="font-size:{{size|int-22}};" class="fas fa-folder"></i>
-                            <figcaption style="display: table-caption;" class="figure-caption text-center">{{obj.name}}</figcaption>
+                            <figcaption class="figure-caption text-center text-wrap text-break">{{obj.name}}</figcaption>
                         </figure class="figure">
                     {% endif %}
                 {% endif %}
