Improve label and text wrapping (#14113)

* Improve label wrapping

- Adjust issue list styles so labels can wrap on the same line as the
  text. This relies on `display: inline` with the HTML whitespace being
  used as the separator.
- Add global word-break: break-word. This should generally avoid text
  overflows in various places.

* add whitespace to history labels

* use overflow-wrap

* restore word-break rules

* use correct pre

* use better selector for middle align

Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>

web_src/less/_base.less

@@ -176,6 +176,7 @@ body {
   overflow-y: auto;
   display: flex;
   flex-direction: column;
+  overflow-wrap: break-word;
 }
 
 img {

web_src/less/_repository.less

@@ -2620,23 +2620,11 @@
   }
 }
 
-.labels-list {
-  display: inline-flex;
-  flex-wrap: wrap;
-}
-
 .labels-list .label {
-  margin-top: 1.5px;
-  margin-bottom: 1.5px;
-  margin-right: 3px;
-  margin-left: 0;
+  margin: 2px 0;
   display: inline-block !important;
 }
 
-.labels-list .label:last-of-type {
-  margin-right: 0;
-}
-
 tbody.commit-list {
   vertical-align: baseline;
 }
@@ -2777,7 +2765,7 @@ tbody.commit-list {
   align-items: center;
   justify-content: space-between;
   flex-wrap: wrap;
-  word-break: break-all;
+  word-break: break-word;
 }
 
 .repo-buttons {

web_src/less/shared/issuelist.less

@@ -29,6 +29,10 @@
       font-size: 16px;
       min-width: 0;
       font-weight: 600;
+
+      > * {
+        vertical-align: middle;
+      }
     }
 
     .issue-item-bottom-row {