Merge pull request '[gitea] week 2024-17 cherry pick (gitea/main -> forgejo)' (#3350) from algernon/wcp/2024-17 into forgejo

Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/3350
Reviewed-by: Earl Warren <earl-warren@noreply.codeberg.org>

web_src/css/actions.css

@@ -44,9 +44,10 @@
 }
 
 .run-list-item-right {
-  flex: 0 0 min(20%, 130px);
+  width: 130px;
   display: flex;
   flex-direction: column;
+  flex-shrink: 0;
   gap: 3px;
   color: var(--color-text-light);
 }
@@ -57,3 +58,26 @@
   gap: .25rem;
   align-items: center;
 }
+
+.run-list .flex-item-trailing {
+  flex-wrap: nowrap;
+  width: 280px;
+  flex: 0 0 280px;
+}
+
+.run-list-ref {
+  display: inline-block !important;
+}
+
+@media (max-width: 767.98px) {
+  .run-list .flex-item-trailing {
+    flex-direction: column;
+    align-items: flex-end;
+    width: auto;
+    flex-basis: auto;
+  }
+  .run-list-item-right,
+  .run-list-ref {
+    max-width: 110px;
+  }
+}

web_src/css/base.css

@@ -453,6 +453,7 @@ a.label,
 
 .ui.selection.dropdown .menu > .item {
   border-color: var(--color-secondary);
+  white-space: nowrap;
 }
 
 .ui.selection.visible.dropdown > .text:not(.default) {
@@ -474,6 +475,12 @@ a.label,
   color: var(--color-text-light-2);
 }
 
+.ui.dropdown > .text {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
 /* extend fomantic style '.ui.dropdown > .text > img' to include svg.img */
 .ui.dropdown > .text > .img {
   margin-left: 0;
@@ -1562,6 +1569,7 @@ table th[data-sortt-desc] .svg {
   align-items: center;
   gap: .25rem;
   vertical-align: middle;
+  min-width: 0;
 }
 
 .ui.ui.button {
@@ -1582,4 +1590,5 @@ table th[data-sortt-desc] .svg {
   display: flex;
   align-items: center;
   gap: .25rem;
+  min-width: 0;
 }

web_src/css/dashboard.css

@@ -7,7 +7,6 @@
 .dashboard.feeds .context.user.menu .ui.header,
 .dashboard.issues .context.user.menu .ui.header {
   font-size: 1rem;
-  text-transform: none;
 }
 
 .dashboard.feeds .filter.menu,

web_src/css/install.css

@@ -18,7 +18,8 @@
   width: auto;
 }
 
-.page-content.install form.ui.form input {
+.page-content.install form.ui.form input:not([type="checkbox"],[type="radio"]),
+.page-content.install form.ui.form .ui.selection.dropdown {
   width: 60%;
 }
 

web_src/css/modules/checkbox.css

@@ -66,7 +66,7 @@ input[type="radio"] {
 }
 .ui.toggle.checkbox input {
   width: 3.5rem;
-  height: 1.5rem;
+  height: 21px;
   opacity: 0;
   z-index: 3;
 }
@@ -81,29 +81,30 @@ input[type="radio"] {
   content: "";
   z-index: 1;
   top: 0;
-  width: 3.5rem;
-  height: 1.5rem;
+  width: 49px;
+  height: 21px;
   border-radius: 500rem;
   left: 0;
 }
 .ui.toggle.checkbox label::after {
   background: var(--color-white);
+  box-shadow: 1px 1px 4px 1px var(--color-shadow);
   position: absolute;
   content: "";
   opacity: 1;
   z-index: 2;
-  width: 1.5rem;
-  height: 1.5rem;
-  top: 0;
-  left: 0;
+  width: 18px;
+  height: 18px;
+  top: 1.5px;
+  left: 1.5px;
   border-radius: 500rem;
   transition: background 0.3s ease, left 0.3s ease;
 }
 .ui.toggle.checkbox input ~ label::after {
-  left: -0.05rem;
+  left: 1.5px;
 }
 .ui.toggle.checkbox input:checked ~ label::after {
-  left: 2.15rem;
+  left: 29px;
 }
 .ui.toggle.checkbox input:focus ~ label::before,
 .ui.toggle.checkbox label::before {

web_src/css/modules/divider.css

@@ -2,12 +2,16 @@
   margin: 10px 0;
   height: 0;
   font-weight: var(--font-weight-medium);
-  text-transform: uppercase;
   color: var(--color-text);
   font-size: 1rem;
   width: 100%;
 }
 
+h4.divider {
+  margin-top: 1.25rem;
+  margin-bottom: 1.25rem;
+}
+
 .divider:not(.divider-text) {
   border-top: 1px solid var(--color-secondary);
 }

web_src/css/modules/flexcontainer.css

@@ -6,10 +6,16 @@
   margin-top: var(--page-spacing);
 }
 
+/* small options menu on the left, used in settings/admin pages */
 .flex-container-nav {
   width: 240px;
 }
 
+/* wide sidebar on the right, used in frontpage */
+.flex-container-sidebar {
+  width: 35%;
+}
+
 .flex-container-main {
   flex: 1;
   min-width: 0; /* make the "text truncate" work, otherwise the flex axis is not limited and the text just overflows */
@@ -19,7 +25,9 @@
   .flex-container {
     flex-direction: column;
   }
-  .flex-container-nav {
+  .flex-container-nav,
+  .flex-container-sidebar {
+    order: -1;
     width: auto;
   }
 }

web_src/css/modules/header.css

@@ -9,7 +9,6 @@
   font-family: var(--fonts-regular);
   font-weight: var(--font-weight-medium);
   line-height: 1.28571429;
-  text-transform: none;
 }
 
 .ui.header:first-child {

web_src/css/modules/label.css

@@ -5,12 +5,12 @@
   display: inline-flex;
   align-items: center;
   gap: .25rem;
+  min-width: 0;
   vertical-align: middle;
   line-height: 1;
   background: var(--color-label-bg);
   color: var(--color-label-text);
   padding: 0.3em 0.5em;
-  text-transform: none;
   font-size: 0.85714286rem;
   font-weight: var(--font-weight-medium);
   border: 0 solid transparent;

web_src/css/repo.css

@@ -435,7 +435,6 @@ td .commit-summary {
   padding: 0 !important;
 }
 
-.non-diff-file-content .attached.segment,
 .non-diff-file-content .pdfobject {
   border-radius: 0 0 var(--border-radius) var(--border-radius);
 }
@@ -836,55 +835,53 @@ td .commit-summary {
   margin-right: 0.25em;
 }
 
-.repository.view.issue .comment-list .timeline-item.commits-list .singular-commit {
-  line-height: 34px; /* this must be same as .badge height, to avoid overflow */
-  clear: both; /* reset the "float right shabox", in the future, use flexbox instead */
+.singular-commit {
+  display: flex;
+  align-items: center;
 }
 
-.repository.view.issue .comment-list .timeline-item.commits-list .singular-commit > img.avatar,
-.repository.view.issue .comment-list .timeline-item.commits-list .singular-commit > .avatar img {
-  position: relative;
-  top: -2px;
+.singular-commit .badge {
+  height: 30px !important;
 }
 
-.repository.view.issue .comment-list .timeline-item.commits-list .singular-commit .shabox .sha.label {
+.singular-commit .shabox .sha.label {
   margin: 0;
   border: 1px solid var(--color-light-border);
 }
 
-.repository.view.issue .comment-list .timeline-item.commits-list .singular-commit .shabox .sha.label.isSigned.isWarning {
+.singular-commit .shabox .sha.label.isSigned.isWarning {
   border: 1px solid var(--color-red-badge);
   background: var(--color-red-badge-bg);
 }
 
-.repository.view.issue .comment-list .timeline-item.commits-list .singular-commit .shabox .sha.label.isSigned.isWarning:hover {
+.singular-commit .shabox .sha.label.isSigned.isWarning:hover {
   background: var(--color-red-badge-hover-bg) !important;
 }
 
-.repository.view.issue .comment-list .timeline-item.commits-list .singular-commit .shabox .sha.label.isSigned.isVerified {
+.singular-commit .shabox .sha.label.isSigned.isVerified {
   border: 1px solid var(--color-green-badge);
   background: var(--color-green-badge-bg);
 }
 
-.repository.view.issue .comment-list .timeline-item.commits-list .singular-commit .shabox .sha.label.isSigned.isVerified:hover {
+.singular-commit .shabox .sha.label.isSigned.isVerified:hover {
   background: var(--color-green-badge-hover-bg) !important;
 }
 
-.repository.view.issue .comment-list .timeline-item.commits-list .singular-commit .shabox .sha.label.isSigned.isVerifiedUntrusted {
+.singular-commit .shabox .sha.label.isSigned.isVerifiedUntrusted {
   border: 1px solid var(--color-yellow-badge);
   background: var(--color-yellow-badge-bg);
 }
 
-.repository.view.issue .comment-list .timeline-item.commits-list .singular-commit .shabox .sha.label.isSigned.isVerifiedUntrusted:hover {
+.singular-commit .shabox .sha.label.isSigned.isVerifiedUntrusted:hover {
   background: var(--color-yellow-badge-hover-bg) !important;
 }
 
-.repository.view.issue .comment-list .timeline-item.commits-list .singular-commit .shabox .sha.label.isSigned.isVerifiedUnmatched {
+.singular-commit .shabox .sha.label.isSigned.isVerifiedUnmatched {
   border: 1px solid var(--color-orange-badge);
   background: var(--color-orange-badge-bg);
 }
 
-.repository.view.issue .comment-list .timeline-item.commits-list .singular-commit .shabox .sha.label.isSigned.isVerifiedUnmatched:hover {
+.singular-commit .shabox .sha.label.isSigned.isVerifiedUnmatched:hover {
   background: var(--color-orange-badge-hover-bg) !important;
 }
 
@@ -1079,6 +1076,12 @@ td .commit-summary {
   margin-left: 15px;
 }
 
+.repository.view.issue .comment-list .event .detail .text {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
 .repository.view.issue .comment-list .event .segments {
   box-shadow: none;
 }
@@ -2339,6 +2342,8 @@ td .commit-summary {
 .stats-table {
   display: table;
   width: 100%;
+  margin: 6px 0;
+  border-spacing: 2px;
 }
 
 .stats-table .table-cell {
@@ -2346,7 +2351,17 @@ td .commit-summary {
 }
 
 .stats-table .table-cell.tiny {
-  height: 0.5em;
+  height: 8px;
+}
+
+.stats-table .table-cell:first-child {
+  border-top-left-radius: 4px;
+  border-bottom-left-radius: 4px;
+}
+
+.stats-table .table-cell:last-child {
+  border-top-right-radius: 4px;
+  border-bottom-right-radius: 4px;
 }
 
 .labels-list {
@@ -2429,6 +2444,7 @@ tbody.commit-list {
 .author-wrapper {
   max-width: 180px;
   align-self: center;
+  white-space: nowrap;
 }
 
 /* in the commit list, messages can wrap so we can use inline */

web_src/js/components/RepoActionView.vue

@@ -382,7 +382,7 @@ export function initRepositoryActionView() {
         <button class="ui basic small compact button red" @click="cancelRun()" v-else-if="run.canCancel">
           {{ locale.cancel }}
         </button>
-        <button class="ui basic small compact button tw-mr-0 link-action" :data-url="`${run.link}/rerun`" v-else-if="run.canRerun">
+        <button class="ui basic small compact button tw-mr-0 tw-whitespace-nowrap link-action" :data-url="`${run.link}/rerun`" v-else-if="run.canRerun">
           {{ locale.rerun_all }}
         </button>
       </div>
@@ -391,8 +391,8 @@ export function initRepositoryActionView() {
         <a class="muted" :href="run.commit.link">{{ run.commit.shortSHA }}</a>
         {{ run.commit.localePushedBy }}
         <a class="muted" :href="run.commit.pusher.link">{{ run.commit.pusher.displayName }}</a>
-        <span class="ui label" v-if="run.commit.shortSHA">
-          <a :href="run.commit.branch.link">{{ run.commit.branch.name }}</a>
+        <span class="ui label tw-max-w-full" v-if="run.commit.shortSHA">
+          <a class="gt-ellipsis" :href="run.commit.branch.link">{{ run.commit.branch.name }}</a>
         </span>
       </div>
       <div class="action-summary">
@@ -435,8 +435,8 @@ export function initRepositoryActionView() {
 
       <div class="action-view-right">
         <div class="job-info-header">
-          <div class="job-info-header-left">
-            <h3 class="job-info-header-title">
+          <div class="job-info-header-left gt-ellipsis">
+            <h3 class="job-info-header-title gt-ellipsis">
               {{ currentJob.title }}
             </h3>
             <p class="job-info-header-detail">
@@ -512,6 +512,7 @@ export function initRepositoryActionView() {
   display: flex;
   align-items: center;
   justify-content: space-between;
+  gap: 8px;
 }
 
 .action-info-summary-title {
@@ -522,6 +523,7 @@ export function initRepositoryActionView() {
   font-size: 20px;
   margin: 0 0 0 8px;
   flex: 1;
+  overflow-wrap: anywhere;
 }
 
 .action-summary {
@@ -737,6 +739,10 @@ export function initRepositoryActionView() {
   font-size: 12px;
 }
 
+.job-info-header-left {
+  flex: 1;
+}
+
 .job-step-container {
   max-height: 100%;
   border-radius: 0 0 var(--border-radius) var(--border-radius);

web_src/js/features/codeeditor.js

@@ -112,6 +112,10 @@ export async function createMonaco(textarea, filename, editorOpts) {
     ...other,
   });
 
+  monaco.editor.addKeybindingRules([
+    {keybinding: monaco.KeyCode.Enter, command: null}, // disable enter from accepting code completion
+  ]);
+
   const model = editor.getModel();
   model.onDidChangeContent(() => {
     textarea.value = editor.getValue({preserveBOM: true});