Fix file table overflows (#12603)

- Fix overflow regression from https://github.com/go-gitea/gitea/pull/12553.
- Fix submodule columns stretching the table
- Refactor template to share more HTML nodes
- Introduce CSS helper classes

Co-authored-by: zeripath <art27@cantab.net>
Co-authored-by: techknowlogick <techknowlogick@gitea.io>

web_src/less/_repository.less

@@ -361,14 +361,23 @@
           width: 120px;
         }
 
-        > a {
-          width: calc(100% - 8px); /* prevent overflow into adjacant cell */
-          display: inline-block;
-          padding-top: 8px;
-          padding-bottom: 8px;
+        .truncate {
+          display: inline-flex;
+          align-items: center;
           overflow: hidden;
           text-overflow: ellipsis;
           white-space: nowrap;
+          width: 100%;
+        }
+
+        a {
+          padding-top: 8px;
+          padding-bottom: 8px;
+        }
+
+        .at {
+          margin-left: 3px;
+          margin-right: 3px;
         }
 
         > * {

web_src/less/helpers.less

@@ -0,0 +1,6 @@
+.flex-0 {
+  flex: 0;
+}
+.flex-1 {
+  flex: 1;
+}

web_src/less/index.less

@@ -1,5 +1,6 @@
 @import "~font-awesome/css/font-awesome.css";
 
+@import "./helpers.less";
 @import "./features/gitgraph.less";
 @import "./features/animations.less";
 @import "./markdown/mermaid.less";