Fix button alignments and remove unnecessary styles (#34206)

Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>

templates/devtest/gitea-ui.tmpl

@@ -9,16 +9,16 @@
 			<a class="silenced" href="#">silenced</a>
 		</div>
 		<h1>Button</h1>
-		<div>
-			Style:
-			<label><input type="checkbox" name="button-style-compact" value="compact">compact</label>
-			<label><input type="radio" name="button-style-size" value="">(normal)</label>
-			<label><input type="radio" name="button-style-size" value="tiny">tiny</label>
-			<label><input type="radio" name="button-style-size" value="mini">mini</label>
+		".ui.button" styles:
+		<div class="flex-text-block tw-gap-4">
+			<label class="gt-checkbox"><input type="radio" name="button-style-size" value="">(normal)</label>
+			<label class="gt-checkbox"><input type="radio" name="button-style-size" value="small">small</label>
+			<label class="gt-checkbox"><input type="radio" name="button-style-size" value="tiny">tiny</label>
+			<label class="gt-checkbox"><input type="radio" name="button-style-size" value="mini">mini</label>
 		</div>
-		<div>
-			State:
-			<label><input type="checkbox" name="button-state-disabled" value="disabled">disabled</label>
+		<div class="flex-text-block tw-gap-4">
+			<label class="gt-checkbox"><input type="checkbox" name="button-style-compact" value="compact">compact</label>
+			<label class="gt-checkbox"><input type="checkbox" name="button-state-disabled" value="disabled">disabled</label>
 		</div>
 		<div id="devtest-button-samples">
 			<ul class="button-sample-groups">

templates/repo/clone_panel.tmpl

@@ -1,4 +1,4 @@
-<button class="ui primary button js-btn-clone-panel">
+<button class="ui compact primary button js-btn-clone-panel">
 	{{svg "octicon-code" 16}}
 	<span>{{ctx.Locale.Tr "repo.code"}}</span>
 	{{svg "octicon-triangle-down" 14 "dropdown icon"}}

templates/repo/diff/box.tmpl

@@ -37,7 +37,7 @@
 			{{if .PageIsPullFiles}}
 				<div id="diff-commit-select" data-issuelink="{{$.Issue.Link}}" data-queryparams="?style={{if $.IsSplitStyle}}split{{else}}unified{{end}}&whitespace={{$.WhitespaceBehavior}}&show-outdated={{$.ShowOutdatedComments}}" data-filter_changes_by_commit="{{ctx.Locale.Tr "repo.pulls.filter_changes_by_commit"}}">
 					{{/* the following will be replaced by vue component, but this avoids any loading artifacts till the vue component is initialized */}}
-					<div class="ui jump dropdown basic button custom">
+					<div class="ui jump dropdown tiny basic button custom">
 						{{svg "octicon-git-commit"}}
 					</div>
 				</div>

templates/repo/diff/conversation.tmpl

@@ -36,21 +36,21 @@
 		{{end}}
 		<div id="code-comments-{{$comment.ID}}" class="field comment-code-cloud {{if $resolved}}tw-hidden{{end}}">
 			<div class="comment-list">
-				<ui class="ui comments">
+				<div class="ui comments">
 					{{template "repo/diff/comments" dict "root" $ "comments" .comments}}
-				</ui>
+				</div>
 			</div>
-			<div class="tw-flex tw-justify-end tw-items-center tw-gap-2 tw-mt-2 tw-flex-wrap">
+			<div class="flex-text-block tw-mt-2 tw-flex-wrap tw-justify-end">
 				<div class="ui buttons">
 					<button class="ui icon tiny basic button previous-conversation">
-						{{svg "octicon-arrow-up" 12 "icon"}} {{ctx.Locale.Tr "repo.issues.previous"}}
+						{{svg "octicon-arrow-up" 12}} {{ctx.Locale.Tr "repo.issues.previous"}}
 					</button>
 					<button class="ui icon tiny basic button next-conversation">
-						{{svg "octicon-arrow-down" 12 "icon"}} {{ctx.Locale.Tr "repo.issues.next"}}
+						{{svg "octicon-arrow-down" 12}} {{ctx.Locale.Tr "repo.issues.next"}}
 					</button>
 				</div>
 				{{if and $.CanMarkConversation $hasReview (not $isReviewPending)}}
-					<button class="ui icon tiny basic button resolve-conversation tw-mr-0" data-origin="diff" data-action="{{if not $resolved}}Resolve{{else}}UnResolve{{end}}" data-comment-id="{{$comment.ID}}" data-update-url="{{$.RepoLink}}/issues/resolve_conversation">
+					<button class="ui icon tiny basic button resolve-conversation" data-origin="diff" data-action="{{if not $resolved}}Resolve{{else}}UnResolve{{end}}" data-comment-id="{{$comment.ID}}" data-update-url="{{$.RepoLink}}/issues/resolve_conversation">
 						{{if $resolved}}
 							{{ctx.Locale.Tr "repo.issues.review.un_resolve_conversation"}}
 						{{else}}
@@ -59,8 +59,8 @@
 					</button>
 				{{end}}
 				{{if and $.SignedUserID (not $.Repository.IsArchived)}}
-					<button class="comment-form-reply ui primary tiny labeled icon button tw-mr-0">
-						{{svg "octicon-reply" 16 "reply icon tw-mr-1"}}{{ctx.Locale.Tr "repo.diff.comment.reply"}}
+					<button class="comment-form-reply ui primary icon tiny button">
+						{{svg "octicon-reply" 12}}{{ctx.Locale.Tr "repo.diff.comment.reply"}}
 					</button>
 				{{end}}
 			</div>

templates/repo/graph.tmpl

@@ -45,8 +45,8 @@
 							{{end}}
 						</div>
 					</div>
-					<button id="flow-color-monochrome" class="ui labelled icon button{{if eq .Mode "monochrome"}} active{{end}}" title="{{ctx.Locale.Tr "repo.commit_graph.monochrome"}}">{{svg "material-invert-colors" 16 "tw-mr-1"}}{{ctx.Locale.Tr "repo.commit_graph.monochrome"}}</button>
-					<button id="flow-color-colored" class="ui labelled icon button{{if ne .Mode "monochrome"}} active{{end}}" title="{{ctx.Locale.Tr "repo.commit_graph.color"}}">{{svg "material-palette" 16 "tw-mr-1"}}{{ctx.Locale.Tr "repo.commit_graph.color"}}</button>
+					<button id="flow-color-monochrome" class="ui icon button{{if eq .Mode "monochrome"}} active{{end}}" title="{{ctx.Locale.Tr "repo.commit_graph.monochrome"}}">{{svg "material-invert-colors" 16 "tw-mr-1"}}{{ctx.Locale.Tr "repo.commit_graph.monochrome"}}</button>
+					<button id="flow-color-colored" class="ui icon button{{if ne .Mode "monochrome"}} active{{end}}" title="{{ctx.Locale.Tr "repo.commit_graph.color"}}">{{svg "material-palette" 16 "tw-mr-1"}}{{ctx.Locale.Tr "repo.commit_graph.color"}}</button>
 				</div>
 			</h2>
 			<div class="ui dividing"></div>

templates/repo/graph/commits.tmpl

@@ -17,18 +17,18 @@
 							{{if eq $refGroup "pull"}}
 								{{if or (not $.HidePRRefs) (SliceUtils.Contains $.SelectedBranches .Name)}}
 									<!-- it's intended to use issues not pulls, if it's a pull you will get redirected -->
-									<a class="ui labelled basic tiny button" href="{{$.RepoLink}}/{{if $.Repository.UnitEnabled ctx ctx.Consts.RepoUnitTypePullRequests}}pulls{{else}}issues{{end}}/{{.ShortName|PathEscape}}">
+									<a class="ui basic tiny button" href="{{$.RepoLink}}/{{if $.Repository.UnitEnabled ctx ctx.Consts.RepoUnitTypePullRequests}}pulls{{else}}issues{{end}}/{{.ShortName|PathEscape}}">
 										{{svg "octicon-git-pull-request"}} #{{.ShortName}}
 									</a>
 								{{end}}
 							{{else if eq $refGroup "tags"}}
 								{{- template "repo/tag/name" dict "RepoLink" $.Repository.Link "TagName" .ShortName -}}
 							{{else if eq $refGroup "remotes"}}
-								<a class="ui labelled basic tiny button" href="{{$.RepoLink}}/src/commit/{{$commit.Rev|PathEscape}}">
+								<a class="ui basic tiny button" href="{{$.RepoLink}}/src/commit/{{$commit.Rev|PathEscape}}">
 									{{svg "octicon-cross-reference"}} {{.ShortName}}
 								</a>
 							{{else if eq $refGroup "heads"}}
-								<a class="ui labelled basic tiny button" href="{{$.RepoLink}}/src/branch/{{.ShortName|PathEscape}}">
+								<a class="ui basic tiny button" href="{{$.RepoLink}}/src/branch/{{.ShortName|PathEscape}}">
 									{{svg "octicon-git-branch"}} {{.ShortName}}
 								</a>
 							{{else}}

templates/repo/header.tmpl

@@ -38,20 +38,20 @@
 				</div>
 			</div>
 			{{if not (or .IsBeingCreated .IsBroken)}}
-				<div class="repo-buttons">
+				<div class="flex-text-block tw-flex-wrap">
 					{{if $.RepoTransfer}}
 						<form method="post" action="{{$.RepoLink}}/action/accept_transfer?redirect_to={{$.RepoLink}}">
 							{{$.CsrfTokenHtml}}
-							<div data-tooltip-content="{{if $.CanUserAcceptOrRejectTransfer}}{{ctx.Locale.Tr "repo.transfer.accept_desc" $.RepoTransfer.Recipient.DisplayName}}{{else}}{{ctx.Locale.Tr "repo.transfer.no_permission_to_accept"}}{{end}}">
-								<button type="submit" class="ui basic button {{if $.CanUserAcceptOrRejectTransfer}}primary {{end}} ok small"{{if not $.CanUserAcceptOrRejectTransfer}} disabled{{end}}>
+							<div class="flex-text-inline" data-tooltip-content="{{if $.CanUserAcceptOrRejectTransfer}}{{ctx.Locale.Tr "repo.transfer.accept_desc" $.RepoTransfer.Recipient.DisplayName}}{{else}}{{ctx.Locale.Tr "repo.transfer.no_permission_to_accept"}}{{end}}">
+								<button type="submit" class="ui compact small basic button {{if $.CanUserAcceptOrRejectTransfer}}primary {{end}} ok small"{{if not $.CanUserAcceptOrRejectTransfer}} disabled{{end}}>
 									{{ctx.Locale.Tr "repo.transfer.accept"}}
 								</button>
 							</div>
 						</form>
 						<form method="post" action="{{$.RepoLink}}/action/reject_transfer?redirect_to={{$.RepoLink}}">
 							{{$.CsrfTokenHtml}}
-							<div data-tooltip-content="{{if $.CanUserAcceptOrRejectTransfer}}{{ctx.Locale.Tr "repo.transfer.reject_desc" $.RepoTransfer.Recipient.DisplayName}}{{else}}{{ctx.Locale.Tr "repo.transfer.no_permission_to_reject"}}{{end}}">
-								<button type="submit" class="ui basic button {{if $.CanUserAcceptOrRejectTransfer}}red {{end}}ok small"{{if not $.CanUserAcceptOrRejectTransfer}} disabled{{end}}>
+							<div class="flex-text-inline" data-tooltip-content="{{if $.CanUserAcceptOrRejectTransfer}}{{ctx.Locale.Tr "repo.transfer.reject_desc" $.RepoTransfer.Recipient.DisplayName}}{{else}}{{ctx.Locale.Tr "repo.transfer.no_permission_to_reject"}}{{end}}">
+								<button type="submit" class="ui compact small basic button {{if $.CanUserAcceptOrRejectTransfer}}red {{end}}ok small"{{if not $.CanUserAcceptOrRejectTransfer}} disabled{{end}}>
 									{{ctx.Locale.Tr "repo.transfer.reject"}}
 								</button>
 							</div>

templates/repo/issue/view_content/conversation.tmpl

@@ -109,7 +109,7 @@
 					</div>
 				{{end}}
 			</div>
-			<div class="code-comment-buttons tw-flex tw-items-center tw-flex-wrap tw-mt-2 tw-mb-1 tw-mx-2">
+			<div class="flex-text-block tw-flex-wrap tw-my-2">
 				<div class="tw-flex-1">
 					{{if $resolved}}
 						<div class="ui grey text">
@@ -118,7 +118,7 @@
 						</div>
 					{{end}}
 				</div>
-				<div class="code-comment-buttons-buttons">
+				<div class="flex-text-block">
 					{{if and $.CanMarkConversation $hasReview (not $isReviewPending)}}
 						<button class="ui tiny basic button resolve-conversation" data-origin="timeline" data-action="{{if not $resolved}}Resolve{{else}}UnResolve{{end}}" data-comment-id="{{$comment.ID}}" data-update-url="{{$.RepoLink}}/issues/resolve_conversation">
 							{{if $resolved}}
@@ -129,8 +129,8 @@
 						</button>
 					{{end}}
 					{{if and $.SignedUserID (not $.Repository.IsArchived)}}
-						<button class="comment-form-reply ui primary tiny labeled icon button tw-ml-1 tw-mr-0">
-							{{svg "octicon-reply" 16 "reply icon tw-mr-1"}}{{ctx.Locale.Tr "repo.diff.comment.reply"}}
+						<button class="comment-form-reply ui primary icon tiny button">
+							{{svg "octicon-reply" 12}}{{ctx.Locale.Tr "repo.diff.comment.reply"}}
 						</button>
 					{{end}}
 				</div>

templates/repo/release/new.tmpl

@@ -100,7 +100,7 @@
 					</div>
 					<span class="help">{{ctx.Locale.Tr "repo.release.prerelease_helper"}}</span>
 					<div class="divider tw-mt-0"></div>
-					<div class="tw-flex tw-justify-end">
+					<div class="flex-text-block tw-justify-end">
 						{{if .PageIsEditRelease}}
 							<a class="ui small button" href="{{.RepoLink}}/releases">
 								{{ctx.Locale.Tr "repo.release.cancel"}}

templates/repo/release_tag_header.tmpl

@@ -2,7 +2,7 @@
 {{$canReadCode := $.Permission.CanRead ctx.Consts.RepoUnitTypeCode}}
 
 {{if $canReadReleases}}
-	<div class="tw-flex">
+	<div class="flex-text-block">
 		<div class="tw-flex-1 tw-flex tw-items-center">
 			<h2 class="ui compact small menu small-menu-items">
 				<a class="{{if and .PageIsReleaseList (not .PageIsSingleTag)}}active {{end}}item" href="{{.RepoLink}}/releases">{{ctx.Locale.PrettyNumber .NumReleases}} {{ctx.Locale.TrN .NumReleases "repo.release" "repo.releases"}}</a>

templates/repo/star_unstar.tmpl

@@ -1,4 +1,4 @@
-<form hx-boost="true" hx-target="this" method="post" action="{{$.RepoLink}}/action/{{if $.IsStaringRepo}}unstar{{else}}star{{end}}">
+<form class="flex-text-inline" hx-boost="true" hx-target="this" method="post" action="{{$.RepoLink}}/action/{{if $.IsStaringRepo}}unstar{{else}}star{{end}}">
 	<div class="ui labeled button" {{if not $.IsSigned}}data-tooltip-content="{{ctx.Locale.Tr "repo.star_guest_user"}}"{{end}}>
 		{{$buttonText := ctx.Locale.Tr "repo.star"}}
 		{{if $.IsStaringRepo}}{{$buttonText = ctx.Locale.Tr "repo.unstar"}}{{end}}

templates/repo/watch_unwatch.tmpl

@@ -1,4 +1,4 @@
-<form hx-boost="true" hx-target="this" method="post" action="{{$.RepoLink}}/action/{{if $.IsWatchingRepo}}unwatch{{else}}watch{{end}}">
+<form class="flex-text-inline" hx-boost="true" hx-target="this" method="post" action="{{$.RepoLink}}/action/{{if $.IsWatchingRepo}}unwatch{{else}}watch{{end}}">
 	<div class="ui labeled button" {{if not $.IsSigned}}data-tooltip-content="{{ctx.Locale.Tr "repo.watch_guest_user"}}"{{end}}>
 		{{$buttonText := ctx.Locale.Tr "repo.watch"}}
 		{{if $.IsWatchingRepo}}{{$buttonText = ctx.Locale.Tr "repo.unwatch"}}{{end}}

templates/shared/actions/runner_list.tmpl

@@ -16,7 +16,7 @@
 					<div class="header">
 						Registration Token
 					</div>
-					<div class="ui input">
+					<div class="ui action input">
 						<input type="text" value="{{.RegistrationToken}}" readonly>
 						<button class="ui basic label button" aria-label="{{ctx.Locale.Tr "copy"}}" data-clipboard-text="{{.RegistrationToken}}">
 							{{svg "octicon-copy" 14}}

web_src/css/base.css

@@ -1037,12 +1037,13 @@ table th[data-sortt-desc] .svg {
   text-align: left;
 }
 
-.ellipsis-button {
-  padding: 0 5px 8px !important;
-  display: inline-block !important;
-  font-weight: var(--font-weight-semibold) !important;
-  line-height: 6px !important;
-  vertical-align: middle !important;
+.ui.button.ellipsis-button {
+  padding: 0 5px 8px;
+  display: inline-block;
+  font-weight: var(--font-weight-semibold);
+  line-height: 8px;
+  vertical-align: middle;
+  min-height: 0;
 }
 
 .precolors {

web_src/css/features/gitgraph.css

@@ -116,6 +116,7 @@
   max-width: 200px;
   overflow: hidden;
   text-overflow: ellipsis;
+  min-height: 0;
 }
 
 #git-graph-container #graph-raw-list {

web_src/css/modules/button.css

@@ -1,20 +1,15 @@
-/* based on Fomantic UI checkbox module, with just the parts extracted that we use. If you find any
-   unused rules here after refactoring, please remove them. */
-
 .ui.button {
   cursor: pointer;
-  display: inline-block;
-  min-height: 1em;
+  display: inline-flex;
   outline: none;
-  vertical-align: baseline;
   font-family: var(--fonts-regular);
   margin: 0 0.25em 0 0;
-  padding: 0.78571429em 1.5em;
   font-weight: var(--font-weight-normal);
+  font-size: 1rem;
   text-align: center;
   text-decoration: none;
   line-height: 1;
-  border-radius: 0.28571429rem;
+  border-radius: var(--border-radius);
   user-select: none;
   -webkit-tap-highlight-color: transparent;
   justify-content: center;
@@ -58,12 +53,13 @@
   pointer-events: none !important;
 }
 
+/* there is no "ui labeled icon button" support" because it is not used */
 .ui.labeled.button:not(.icon) {
-  display: inline-flex;
   flex-direction: row;
   background: none;
-  padding: 0 !important;
+  padding: 0;
   border: none;
+  min-height: unset;
 }
 .ui.labeled.button > .button {
   margin: 0;
@@ -102,47 +98,60 @@
   margin: 0 -0.21428571em 0 0.42857143em;
 }
 
+/* reference sizes (not exactly at the moment): normal: padding-x=21, height=38 ; compact: padding-x=15, height=32 */
+.ui.button { /* stylelint-disable-line no-duplicate-selectors */
+  min-height: 38px;
+  padding: 0.57em /* around 8px */ 1.43em /* around 20px */;
+}
 .ui.compact.buttons .button,
 .ui.compact.button {
-  padding: 0.58928571em 1.125em;
+  padding: 0.42em /* around 8px */ 1.07em /* around 15px */;
+  min-height: 32px;
 }
 .ui.compact.icon.buttons .button,
 .ui.compact.icon.button {
-  padding: 0.58928571em;
-}
-.ui.compact.labeled.icon.button {
-  padding: 0.58928571em 3.69642857em;
-}
-.ui.compact.labeled.icon.button > .icon {
-  padding: 0.58928571em 0;
+  padding: 0.57em /* around 8px */;
 }
 
-.ui.buttons .button,
-.ui.button {
-  font-size: 1rem;
-}
+/* reference size: mini: padding-x=16, height=30 ; compact: padding-x=12, height=26 */
 .ui.mini.buttons .dropdown,
 .ui.mini.buttons .dropdown .menu > .item,
 .ui.mini.buttons .button,
 .ui.ui.ui.ui.mini.button {
-  font-size: 0.78571429rem;
+  font-size: 11px;
+  min-height: 30px;
+}
+.ui.ui.ui.ui.mini.button.compact {
+  min-height: 26px;
 }
+
+/* reference size: tiny: padding-x=18, height=32 ; compact: padding-x=13, height=28 */
 .ui.tiny.buttons .dropdown,
 .ui.tiny.buttons .dropdown .menu > .item,
 .ui.tiny.buttons .button,
 .ui.ui.ui.ui.tiny.button {
-  font-size: 0.85714286rem;
+  font-size: 12px;
+  min-height: 32px;
+}
+.ui.ui.ui.ui.tiny.button.compact {
+  min-height: 28px;
 }
+
+/* reference size: small: padding-x=19, height=34 ; compact: padding-x=14, height=30 */
 .ui.small.buttons .dropdown,
 .ui.small.buttons .dropdown .menu > .item,
 .ui.small.buttons .button,
 .ui.ui.ui.ui.small.button {
-  font-size: 0.92857143rem;
+  font-size: 13px;
+  min-height: 34px;
+}
+.ui.ui.ui.ui.small.button.compact {
+  min-height: 30px;
 }
 
 .ui.icon.buttons .button,
 .ui.icon.button:not(.compact) {
-  padding: 0.78571429em;
+  padding: 0.57em;
 }
 .ui.icon.buttons .button > .icon,
 .ui.icon.button > .icon {
@@ -152,12 +161,12 @@
 
 .ui.basic.buttons .button,
 .ui.basic.button {
-  border-radius: 0.28571429rem;
+  border-radius: var(--border-radius);
   background: none;
 }
 .ui.basic.buttons {
   border: 1px solid var(--color-secondary);
-  border-radius: 0.28571429rem;
+  border-radius: var(--border-radius);
 }
 .ui.basic.buttons .button {
   border-radius: 0;
@@ -188,29 +197,6 @@
   background: var(--color-active);
 }
 
-.ui.labeled.icon.button {
-  position: relative;
-  padding-left: 4.07142857em !important;
-  padding-right: 1.5em !important;
-}
-
-.ui.labeled.icon.button > .icon {
-  position: absolute;
-  top: 0;
-  left: 0;
-  height: 100%;
-  line-height: 1;
-  border-radius: 0;
-  border-top-left-radius: inherit;
-  border-bottom-left-radius: inherit;
-  text-align: center;
-  animation: none;
-  padding: 0.78571429em 0;
-  margin: 0;
-  width: 2.57142857em;
-  background: var(--color-hover);
-}
-
 .ui.button.toggle.active {
   background-color: var(--color-green);
   color: var(--color-white);
@@ -379,12 +365,12 @@ It needs some tricks to tweak the left/right borders with active state */
 .ui.buttons .button:first-child {
   border-left: none;
   margin-left: 0;
-  border-top-left-radius: 0.28571429rem;
-  border-bottom-left-radius: 0.28571429rem;
+  border-top-left-radius: var(--border-radius);
+  border-bottom-left-radius: var(--border-radius);
 }
 .ui.buttons .button:last-child {
-  border-top-right-radius: 0.28571429rem;
-  border-bottom-right-radius: 0.28571429rem;
+  border-top-right-radius: var(--border-radius);
+  border-bottom-right-radius: var(--border-radius);
 }
 
 .ui.buttons .button:hover {
@@ -414,10 +400,3 @@ It needs some tricks to tweak the left/right borders with active state */
 .ui.buttons .button.active + .button {
   border-left: none;
 }
-
-/* apply the vertical padding of .compact to non-compact buttons when they contain a svg as they
-   would otherwise appear too large. Seen on "RSS Feed" button on repo releases tab. */
-.ui.small.button:not(.compact):has(.svg) {
-  padding-top: 0.58928571em;
-  padding-bottom: 0.58928571em;
-}

web_src/css/repo.css

@@ -1629,21 +1629,17 @@ td .commit-summary {
   display: flex;
   align-items: center;
   gap: 0.5rem;
+  flex-wrap: wrap;
 }
 
 .repo-button-row-left {
   flex-grow: 1;
 }
 
-.repo-button-row .button {
-  padding: 6px 10px !important;
-  height: 30px;
+.repo-button-row .ui.button {
   flex-shrink: 0;
   margin: 0;
-}
-
-.repo-button-row .button.dropdown:not(.icon) {
-  padding-right: 22px !important; /* normal buttons have !important paddings, so we need to override it for dropdown (Add File) icons */
+  min-height: 30px;
 }
 
 tbody.commit-list {
@@ -2221,10 +2217,11 @@ tbody.commit-list {
   max-width: min(400px, 90vw);
 }
 
-.branch-selector-dropdown .branch-dropdown-button {
+.branch-selector-dropdown .ui.button.branch-dropdown-button {
   margin: 0;
   max-width: 340px;
   line-height: var(--line-height-default);
+  padding: 0 0.5em 0 0.75em;
 }
 
 /* FIXME: These media selectors are not ideal (just keep them from old code).

web_src/css/repo/clone.css

@@ -1,7 +1,7 @@
 /* only used by "repo/empty.tmpl" */
 .clone-buttons-combo {
   display: flex;
-  align-items: center;
+  align-items: stretch;
   flex: 1;
 }
 
@@ -11,7 +11,6 @@
 
 .ui.action.input.clone-buttons-combo input {
   border-radius: 0; /* override fomantic border-radius for ".ui.input > input" */
-  height: 30px;
 }
 
 /* used by the clone-panel popup */

web_src/css/repo/header.css

@@ -27,47 +27,3 @@
 .repo-header .flex-item-trailing {
   flex-wrap: nowrap;
 }
-
-.repo-buttons {
-  align-items: center;
-  display: flex;
-  flex-flow: row wrap;
-  word-break: keep-all;
-  gap: 0.25em;
-}
-
-.repo-buttons button[disabled] ~ .label {
-  opacity: var(--opacity-disabled);
-  color: var(--color-text-dark);
-  background: var(--color-light-mimic-enabled) !important;
-}
-
-.repo-buttons button[disabled] ~ .label:hover {
-  color: var(--color-primary-dark-1);
-}
-
-.repo-buttons .ui.labeled.button.disabled {
-  pointer-events: inherit !important;
-}
-
-.repo-buttons .ui.labeled.button.disabled > .label {
-  color: var(--color-text-dark);
-  background: var(--color-light-mimic-enabled) !important;
-}
-
-.repo-buttons .ui.labeled.button.disabled > .label:hover {
-  color: var(--color-primary-dark-1);
-}
-
-.repo-buttons .ui.labeled.button.disabled > .button {
-  pointer-events: none !important;
-}
-
-@media (max-width: 767.98px) {
-  .repo-buttons .ui.button,
-  .repo-buttons .ui.label {
-    padding-left: 8px;
-    padding-right: 8px;
-    margin: 0;
-  }
-}

web_src/css/repo/list-header.css

@@ -1,6 +1,6 @@
 .list-header {
   display: flex;
-  align-items: center;
+  align-items: stretch;
   flex-wrap: wrap;
   gap: .5rem;
 }
@@ -8,9 +8,8 @@
 .list-header-search {
   display: flex;
   flex: 1;
-  align-items: center;
+  align-items: stretch;
   flex-wrap: wrap;
-  justify-content: center;
   min-width: 200px; /* to enable flexbox wrapping on mobile */
 }
 

web_src/js/components/DiffCommitSelector.vue

@@ -212,7 +212,7 @@ export default defineComponent({
   <div class="ui scrolling dropdown custom diff-commit-selector">
     <button
       ref="expandBtn"
-      class="ui basic button"
+      class="ui tiny basic button"
       @click.stop="toggleMenu()"
       :data-tooltip-content="locale.filter_changes_by_commit"
       aria-haspopup="true"

web_src/js/components/RepoBranchTagSelector.vue

@@ -217,13 +217,13 @@ export default defineComponent({
 </script>
 <template>
   <div class="ui dropdown custom branch-selector-dropdown ellipsis-text-items">
-    <div tabindex="0" class="ui button branch-dropdown-button" @click="menuVisible = !menuVisible">
+    <div tabindex="0" class="ui compact button branch-dropdown-button" @click="menuVisible = !menuVisible">
       <span class="flex-text-block gt-ellipsis">
         <template v-if="dropdownFixedText">{{ dropdownFixedText }}</template>
         <template v-else>
           <svg-icon v-if="currentRefType === 'tag'" name="octicon-tag"/>
           <svg-icon v-else name="octicon-git-branch"/>
-          <strong ref="dropdownRefName" class="tw-ml-2 tw-inline-block gt-ellipsis">{{ currentRefShortName }}</strong>
+          <strong ref="dropdownRefName" class="tw-inline-block gt-ellipsis">{{ currentRefShortName }}</strong>
         </template>
       </span>
       <svg-icon name="octicon-triangle-down" :size="14" class="dropdown icon"/>