Merge pull request #1558 from LunarWatcher/fix-wrapping

Oaphi · web-flow · commit 219c1bd15d8c · 2025-03-31T06:09:40.000+03:00
Add `overflow-wrap`s to several elements currently overflowing
diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
@@ -189,6 +189,7 @@ img {
 .widget .widget--body + .widget--header {
   border-top: 1px solid #d0d9dd;
 }
+
 .widget.is-tertiary .widget--body + .widget--header {
   border-top: 1px solid #9daeb7;
 }
@@ -197,6 +198,10 @@ img {
   margin-left: 0.75em;
 }
 
+.widget--body, .widget-body p {
+  overflow-wrap: break-word;
+}
+
 pre {
   background: #f0f0f0;
   border: 0;
@@ -216,7 +221,10 @@ pre .hljs {
 table {
   border-collapse: collapse;
   padding: 4px;
-  max-width: 100%
+  max-width: 100%;
+  td {
+    overflow-wrap: anywhere;
+  }
 }
 
 table.is-full-width {
@@ -269,3 +277,12 @@ img.header--item-image {
 .widget--header-link {
   margin: 0 0 0 0.5em;
 }
+
+mjx-assistive-mml {
+  max-width: 100%;
+}
+
+mjx-container {
+    overflow-x: auto;
+    overflow-y: hidden;
+}
diff --git a/app/assets/stylesheets/posts.scss b/app/assets/stylesheets/posts.scss
@@ -25,6 +25,7 @@
 
 .badge.is-tag {
   margin: 0.1rem;
+  max-width: 100%;
 }
 
 h1 .badge.is-tag.is-master-tag {
@@ -40,12 +41,24 @@ h1 .badge.is-tag.is-master-tag {
   font-size: 14px;
 }
 
+.post-list--tags {
+  max-width: 100%;
+}
+
 .post-list--title {
   font-size: 19px;
+  width: 100%;
+  a {
+    display: inline-block;
+    width: 100%;
+    overflow-wrap: break-word;
+  }
 }
 
 .post-list--content {
   font-size: 14px;
+  width: 100%;
+  overflow-wrap: break-word;
 }
 
 .post--action-dialog {
@@ -81,6 +94,13 @@ h1 .badge.is-tag.is-master-tag {
   padding: 1em;
   border-bottom: 1px solid $muted-graphic;
   margin-bottom: 1em;
+
+  width: 100%;
+  overflow-wrap: break-word;
+
+  * {
+    max-width: 100%;  
+  }
 }
 
 .post-field.widget--body {
@@ -116,6 +136,10 @@ h1 .badge.is-tag.is-master-tag {
   align-items: center;
   flex-direction: column-reverse;
 
+  .post--title-text {
+    width: 100%;
+  }
+
   @media screen and (min-width: $screen-md) {
     flex-direction: row;
 
@@ -196,10 +220,15 @@ h1 .badge.is-tag.is-master-tag {
 .post--content {
   flex: 1;
   word-break: break-word;
+  
+  * {
+    max-width: 100%;
+  }
 
   @media screen and (min-width: $screen-sm) {
     max-width: calc(100% - 3em);
   }
+
 }
 
 .post--body p {
@@ -216,3 +245,7 @@ pre code.hljs {
 .failed-validation {
   border: 2px solid #d21919 !important;
 }
+
+.js-thread-title {
+  overflow-wrap: break-word;
+}
diff --git a/app/assets/stylesheets/utilities.scss b/app/assets/stylesheets/utilities.scss
@@ -169,6 +169,13 @@ div:hover > .copy-button {
 }
 
 .diff {
+  .diff-section {
+    .diff-old, 
+    .diff-new {
+      overflow: scroll;
+    }
+  }
+
   .raw-markdown {
     white-space: unset;
   }
@@ -184,6 +191,7 @@ div:hover > .copy-button {
 
       del, ins {
         text-decoration: none;
+        overflow-wrap: break-word;
       }
 
       del > strong {
@@ -289,3 +297,7 @@ span.spoiler {
 .transparent {
   opacity: 0;
 }
+
+.wrap-anywhere {
+  overflow-wrap: anywhere;
+}
diff --git a/app/views/posts/_list.html.erb b/app/views/posts/_list.html.erb
@@ -54,7 +54,7 @@
         by <%= user_link active_user %>
       <% end %>
     </p>
-    <div class="has-padding-top-2">
+    <div class="has-padding-top-2 post-list--tags">
       <% category = defined?(@category) ? @category : post.category %>
       <% if @show_type_tag || category.display_post_types.reject { |e| e.to_s.empty? }.size > 1 %>
         <%= post_type_badge(post.post_type) %>
diff --git a/app/views/tags/show.html.erb b/app/views/tags/show.html.erb
@@ -1,7 +1,7 @@
 <% content_for :title, "Posts tagged #{@tag.name}" %>
 
 <h1 class="has-margin-0 has-margin-top-4">
-  Posts tagged <span class="<%= tag_classes(@tag, @category) %> is-large"><%= @tag.name %></span>
+  Posts tagged <span class="<%= tag_classes(@tag, @category) %> is-large wrap-anywhere"><%= @tag.name %></span>
   <% if moderator? %>
     <a href="#" class="has-font-size-caption js-rename-tag h-m-r-2"
        data-category="<%= @category.id %>" data-tag="<%= @tag.id %>" data-name="<%= @tag.name %>"
