oppi.li / perf-test
loading up the forgejo repo on tangled to test page performance
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

Fix various overflows on actions view (#30344)

Fix a number of text overflow issues in actions view and run list. Also
improve mobile view of run list.

Fixes: https://github.com/go-gitea/gitea/issues/30328

<img width="782" alt="Screenshot 2024-04-08 at 23 10 16"
src="https://github.com/go-gitea/gitea/assets/115237/3d9f9f88-3eab-44a0-8144-30c2b58b24cb">
<img width="935" alt="Screenshot 2024-04-08 at 23 17 46"
src="https://github.com/go-gitea/gitea/assets/115237/581d73ea-a31d-416b-be3a-47313b879b12">
<img width="1008" alt="Screenshot 2024-04-08 at 23 49 05"
src="https://github.com/go-gitea/gitea/assets/115237/c5d10565-f285-477f-8659-1caf94797647">
<img width="397" alt="Screenshot 2024-04-08 at 23 55 30"
src="https://github.com/go-gitea/gitea/assets/115237/368aaa75-1903-4058-9d75-d1fe91c564d6">

(cherry picked from commit b9f69b4a4d1d6b5b1f94852f6dfcae41b30658ff)

authored by

silverwind and committed by
Gergely Nagy ac0a2036 b691a3e6

+43 -13
+7 -7
templates/repo/actions/runs_list.tmpl
··· 1 - <div class="flex-list"> 1 + <div class="flex-list run-list"> 2 2 {{if not .Runs}} 3 3 <div class="empty-placeholder"> 4 4 {{svg "octicon-no-entry" 48}} ··· 28 28 </div> 29 29 <div class="flex-item-trailing"> 30 30 {{if .RefLink}} 31 - <a class="ui label tw-px-1 tw-mx-0" href="{{.RefLink}}">{{.PrettyRef}}</a> 31 + <a class="ui label run-list-ref gt-ellipsis" href="{{.RefLink}}">{{.PrettyRef}}</a> 32 32 {{else}} 33 - <span class="ui label tw-px-1 tw-mx-0">{{.PrettyRef}}</span> 33 + <span class="ui label run-list-ref gt-ellipsis">{{.PrettyRef}}</span> 34 34 {{end}} 35 - </div> 36 - <div class="run-list-item-right"> 37 - <div class="run-list-meta">{{svg "octicon-calendar" 16}}{{TimeSinceUnix .Updated ctx.Locale}}</div> 38 - <div class="run-list-meta">{{svg "octicon-stopwatch" 16}}{{.Duration}}</div> 35 + <div class="run-list-item-right"> 36 + <div class="run-list-meta">{{svg "octicon-calendar" 16}}{{TimeSinceUnix .Updated ctx.Locale}}</div> 37 + <div class="run-list-meta">{{svg "octicon-stopwatch" 16}}{{.Duration}}</div> 38 + </div> 39 39 </div> 40 40 </div> 41 41 {{end}}
+25 -1
web_src/css/actions.css
··· 44 44 } 45 45 46 46 .run-list-item-right { 47 - flex: 0 0 min(20%, 130px); 47 + width: 130px; 48 48 display: flex; 49 49 flex-direction: column; 50 + flex-shrink: 0; 50 51 gap: 3px; 51 52 color: var(--color-text-light); 52 53 } ··· 57 58 gap: .25rem; 58 59 align-items: center; 59 60 } 61 + 62 + .run-list .flex-item-trailing { 63 + flex-wrap: nowrap; 64 + width: 280px; 65 + flex: 0 0 280px; 66 + } 67 + 68 + .run-list-ref { 69 + display: inline-block !important; 70 + } 71 + 72 + @media (max-width: 767.98px) { 73 + .run-list .flex-item-trailing { 74 + flex-direction: column; 75 + align-items: flex-end; 76 + width: auto; 77 + flex-basis: auto; 78 + } 79 + .run-list-item-right, 80 + .run-list-ref { 81 + max-width: 110px; 82 + } 83 + }
+11 -5
web_src/js/components/RepoActionView.vue
··· 382 382 <button class="ui basic small compact button red" @click="cancelRun()" v-else-if="run.canCancel"> 383 383 {{ locale.cancel }} 384 384 </button> 385 - <button class="ui basic small compact button tw-mr-0 link-action" :data-url="`${run.link}/rerun`" v-else-if="run.canRerun"> 385 + <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"> 386 386 {{ locale.rerun_all }} 387 387 </button> 388 388 </div> ··· 391 391 <a class="muted" :href="run.commit.link">{{ run.commit.shortSHA }}</a> 392 392 {{ run.commit.localePushedBy }} 393 393 <a class="muted" :href="run.commit.pusher.link">{{ run.commit.pusher.displayName }}</a> 394 - <span class="ui label" v-if="run.commit.shortSHA"> 395 - <a :href="run.commit.branch.link">{{ run.commit.branch.name }}</a> 394 + <span class="ui label tw-max-w-full" v-if="run.commit.shortSHA"> 395 + <a class="gt-ellipsis" :href="run.commit.branch.link">{{ run.commit.branch.name }}</a> 396 396 </span> 397 397 </div> 398 398 <div class="action-summary"> ··· 435 435 436 436 <div class="action-view-right"> 437 437 <div class="job-info-header"> 438 - <div class="job-info-header-left"> 439 - <h3 class="job-info-header-title"> 438 + <div class="job-info-header-left gt-ellipsis"> 439 + <h3 class="job-info-header-title gt-ellipsis"> 440 440 {{ currentJob.title }} 441 441 </h3> 442 442 <p class="job-info-header-detail"> ··· 512 512 display: flex; 513 513 align-items: center; 514 514 justify-content: space-between; 515 + gap: 8px; 515 516 } 516 517 517 518 .action-info-summary-title { ··· 522 523 font-size: 20px; 523 524 margin: 0 0 0 8px; 524 525 flex: 1; 526 + overflow-wrap: anywhere; 525 527 } 526 528 527 529 .action-summary { ··· 735 737 .job-info-header .job-info-header-detail { 736 738 color: var(--color-console-fg-subtle); 737 739 font-size: 12px; 740 + } 741 + 742 + .job-info-header-left { 743 + flex: 1; 738 744 } 739 745 740 746 .job-step-container {