Add button on diff header to copy file name, misc diff header tweaks (#24986)

1. Add this button:

<img width="232" alt="Screenshot 2023-05-29 at 15 21 47"
src="https://github.com/go-gitea/gitea/assets/115237/5eaf6bd1-83db-4ffc-9503-eda0c59807d2">
<img width="297" alt="Screenshot 2023-05-29 at 15 20 22"
src="https://github.com/go-gitea/gitea/assets/115237/708a344f-f6d7-4229-bfda-76e1571b42c8">

2. Correct `button-link` styles to not have a background hover effect.
3. Tweak `.ui.container` padding to be the same for fluid and non-fluid.

4. Misc enhancements to diff header:

Before:
<img width="984" alt="Screenshot 2023-05-29 at 15 38 53"
src="https://github.com/go-gitea/gitea/assets/115237/c7926f6a-bd0a-4b05-97ad-c91fc25c62d5">

After:
<img width="987" alt="Screenshot 2023-05-29 at 15 43 10"
src="https://github.com/go-gitea/gitea/assets/115237/0149f545-45f8-42cf-b443-e1c76bd5cdeb">

3 files changed, 44 insertions, 40 deletions

diff --git a/web_src/css/base.css b/web_src/css/base.css
index 3c32eb6045..d143b20f81 100644
--- a/web_src/css/base.css
+++ b/web_src/css/base.css
@@ -893,19 +893,32 @@ img.ui.avatar,
 .page-content .ui.ui.ui.container:not(.fluid) {
   width: 1280px;
   max-width: calc(100vw - 64px);
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.ui.container.fluid.padded {
+  padding: 0 32px;
 }
 
 /* enable fluid page widths for medium size viewports */
 @media (min-width: 768px) and (max-width: 1200px) {
-  .ui.ui.ui.container:not(.fluid) {
-    width: calc(100vw - 64px);
+  .page-content .ui.ui.ui.container:not(.fluid) {
+    width: calc(100vw - 32px);
+    max-width: calc(100vw - 32px);
+  }
+  .ui.container.fluid.padded {
+    padding: 0 16px;
   }
 }
 
-@media only screen and (max-width: 767px) {
+@media (max-width: 767px) {
   .page-content .ui.ui.ui.container:not(.fluid) {
-    width: auto; /* copied from semantic css */
-    max-width: 100%;
+    width: calc(100vw - 16px);
+    max-width: calc(100vw - 16px);
+  }
+  .ui.container.fluid.padded {
+    padding: 0 8px;
   }
 }
 
@@ -1165,10 +1178,6 @@ img.ui.avatar,
   float: right;
 }
 
-.ui.container.fluid.padded {
-  padding: 0 32px;
-}
-
 .ui.form .ui.button {
   font-weight: var(--font-weight-normal);
 }
@@ -1525,7 +1534,8 @@ img.ui.avatar,
 }
 
 @media (max-width: 767px) {
-  .not-mobile {
+  /* double selector so it wins over .gt-df etc */
+  .not-mobile.not-mobile {
     display: none !important;
   }
 }
@@ -1552,12 +1562,6 @@ img.ui.avatar,
   clip: auto;
 }
 
-@media (min-width: 768px) and (max-width: 991px) {
-  .ui.container {
-    width: 95%;
-  }
-}
-
 .ui.menu.new-menu {
   margin-bottom: 15px;
   background: var(--color-navbar);
diff --git a/web_src/css/modules/button.css b/web_src/css/modules/button.css
index 1f2d2a4494..d9bc69043d 100644
--- a/web_src/css/modules/button.css
+++ b/web_src/css/modules/button.css
@@ -55,7 +55,11 @@
   border-left: 1px solid var(--color-light-border);
 }
 
-.ui.buttons .button + .button {
+.ui.buttons .button:first-child:has(+ .button.active) {
+  border-right: none !important;
+}
+
+.ui.buttons .button + .button:not(.active) {
   border-left: none;
 }
 
diff --git a/web_src/css/repo.css b/web_src/css/repo.css
index 1f870658d5..71cd7a2846 100644
--- a/web_src/css/repo.css
+++ b/web_src/css/repo.css
@@ -1616,12 +1616,6 @@
   margin-right: -4px;
 }
 
-.repository .diff-detail-box > div::after {
-  clear: both;
-  content: "";
-  display: block;
-}
-
 .repository .diff-detail-box .diff-detail-stats strong {
   margin-left: 0.25rem;
   margin-right: 0.25rem;
@@ -1658,12 +1652,10 @@
   height: 33px;
 }
 
-.repository .diff-detail-box .diff-detail-actions > * {
-  margin-right: 0;
-}
-
-.repository .diff-detail-box .diff-detail-actions > * + * {
-  margin-left: 0.25rem;
+.diff-detail-actions > *,
+.diff-detail-actions .button {
+  margin-left: 0 !important;
+  margin-right: 0 !important;
 }
 
 @media (max-width: 480px) {
@@ -1728,11 +1720,14 @@
 .repository .diff-box .header:not(.resolved-placeholder) .button {
   padding: 8px 12px;
   flex: 0 0 auto;
-  margin-top: -8px;
-  margin-bottom: -8px;
   margin-right: 0;
 }
 
+.repository .diff-box .header:not(.resolved-placeholder) .button:has(svg) {
+  padding-top: 6px;
+  padding-bottom: 6px;
+}
+
 .repository .diff-box .resolved-placeholder {
   display: flex;
   align-items: center;
@@ -3089,6 +3084,11 @@ tbody.commit-list {
   word-break: break-all;
 }
 
+.diff-file-header {
+  padding-top: 5px !important;
+  padding-bottom: 5px !important;
+}
+
 .diff-file-box[data-folded="true"] .diff-file-body {
   display: none;
 }
@@ -3097,10 +3097,6 @@ tbody.commit-list {
   border-radius: var(--border-radius) !important;
 }
 
-.diff-file-header-actions > * + * {
-  margin-left: 0.5rem !important;
-}
-
 .ui.attached.header.diff-file-header.sticky-2nd-row {
   position: sticky;
   top: 47px; /* match .repository .diff-detail-box */
@@ -3119,15 +3115,15 @@ tbody.commit-list {
   }
 }
 
-.ui.attached.header.diff-file-header .diff-file-header-actions {
-  flex-shrink: 0;
-}
-
-.ui.attached.header.diff-file-header .diff-file-name {
+.diff-file-name {
   flex: auto;
   min-width: 100px;
 }
 
+.diff-file-name .ui.label {
+  margin-left: 0 !important;
+}
+
 .diff-stats-bar {
   display: inline-block;
   background-color: var(--color-red);