troldspejlet/forgejo
troldspejlet/forgejo
1
0
Fork 0
mirror of https://codeberg.org/forgejo/forgejo.git synced 2024-11-23 19:11:58 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

Rework header bar on issue, pull requests and milestone (#24420)

Browse source 
- Make search bar dynamic full width via flexbox
- Make all buttons `small` so font size is the same for all elements in
the header
- Remove primary color from search field, add SVG icon like on Code tab
- Fix button vertical padding being enlarged by SVG icons

[View diff without
whitespace](https://github.com/go-gitea/gitea/pull/24420/files?diff=unified&w=1)

<img width="1226" alt="Screenshot 2023-04-29 at 11 58 53"
src="https://user-images.githubusercontent.com/115237/235296851-74848267-664f-4c1f-b94c-a1b94196ff75.png">
<img width="1219" alt="Screenshot 2023-04-29 at 11 59 39"
src="https://user-images.githubusercontent.com/115237/235296852-bcfde5ed-8658-43c2-b7e5-3ad84611e76f.png">

Mobile:
<img width="437" alt="Screenshot 2023-04-29 at 11 59 52"
src="https://user-images.githubusercontent.com/115237/235296860-99263373-7b27-4540-868c-a93e70f281ca.png">
<img width="433" alt="Screenshot 2023-04-29 at 12 00 00"
src="https://user-images.githubusercontent.com/115237/235296862-6cf64317-a864-405a-a00f-b5ab620349f5.png">
This commit is contained in:
silverwind 2023-04-30 05:33:25 +02:00 committed by GitHub
parent 0f52beb6b7
commit 8f4dafcd4e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
22 changed files with 197 additions and 175 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
templates/projects/list.tmpl
View file

@ -3,14 +3,14 @@
{{if .CanWriteProjects}}
<div class="navbar">
<div class="ui right">
<a class="ui green button" href="{{$.Link}}/new">{{.locale.Tr "repo.projects.new"}}</a>
<a class="ui small green button" href="{{$.Link}}/new">{{.locale.Tr "repo.projects.new"}}</a>
</div>
</div>
<div class="ui divider"></div>
{{end}}
{{template "base/alert" .}}
<div class="ui compact tiny menu">
<div class="small-pill-buttons ui compact tiny menu">
<a class="item{{if not .IsShowClosed}} active{{end}}" href="{{$.Link}}?state=open">
{{svg "octicon-project-symlink" 16 "gt-mr-3"}}
{{.locale.PrettyNumber .OpenCount}}&nbsp;{{.locale.Tr "repo.issues.open_title"}}

2
templates/projects/new.tmpl
View file

@ -3,7 +3,7 @@
<div class="navbar">
{{if and .CanWriteProjects .PageIsEditProject}}
<div class="ui right floated secondary menu">
<a class="ui green button" href="{{$.HomeLink}}/-/projects/new">{{.locale.Tr "repo.milestones.new"}}</a>
<a class="ui small green button" href="{{$.HomeLink}}/-/projects/new">{{.locale.Tr "repo.milestones.new"}}</a>
</div>
{{end}}
</div>

2
templates/projects/view.tmpl
View file

@ -5,7 +5,7 @@
</div>
<div class="column right aligned">
{{if .CanWriteProjects}}
<a class="ui green button show-modal item" data-modal="#new-board-item">{{.locale.Tr "new_project_column"}}</a>
<a class="ui small green button show-modal item" data-modal="#new-board-item">{{.locale.Tr "new_project_column"}}</a>
{{end}}
<div class="ui small modal new-board-modal" id="new-board-item">
<div class="header">

2
templates/repo/actions/openclose.tmpl
View file

@ -1,4 +1,4 @@
<div class="ui compact tiny menu">
<div class="small-pill-buttons ui compact tiny menu">
<a class="{{if not .IsShowClosed}}active {{end}}item" href="{{$.Link}}?workflow={{.CurWorkflow}}&state=open">
{{svg "octicon-issue-opened" 16 "gt-mr-3"}}
{{.locale.Tr "actions.runs.open_tab" $.NumOpenActionRuns}}

4
templates/repo/home.tmpl
View file

@ -14,12 +14,12 @@
<div class="ui repo-search">
<form class="ui form ignore-dirty" action="{{.RepoLink}}/search" method="get">
<div class="field">
<div class="ui action input{{if .CodeIndexerUnavailable}} disabled left icon{{end}}"{{if .CodeIndexerUnavailable}} data-tooltip-content="{{.locale.Tr "repo.search.code_search_unavailable"}}"{{end}}>
<div class="ui small action input{{if .CodeIndexerUnavailable}} disabled left icon{{end}}"{{if .CodeIndexerUnavailable}} data-tooltip-content="{{.locale.Tr "repo.search.code_search_unavailable"}}"{{end}}>
<input name="q" value="{{.Keyword}}"{{if .CodeIndexerUnavailable}} disabled{{end}} placeholder="{{.locale.Tr "repo.search.search_repo"}}">
{{if .CodeIndexerUnavailable}}
<i class="icon gt-df gt-ac gt-jc">{{svg "octicon-alert"}}</i>
{{end}}
<button class="ui icon button"{{if .CodeIndexerUnavailable}} disabled{{end}} type="submit">
<button class="ui small icon button"{{if .CodeIndexerUnavailable}} disabled{{end}} type="submit">
{{svg "octicon-search"}}
</button>
</div>

18
templates/repo/issue/list.tmpl
View file

@ -2,26 +2,18 @@
<div role="main" aria-label="{{.Title}}" class="page-content repository issue-list">
{{template "repo/header" .}}
<div class="ui container">
<div class="ui three column grid issue-list-headers">
<div class="column">
<div class="list-header">
{{template "repo/issue/navbar" .}}
</div>
<div class="column center aligned">
{{template "repo/issue/search" .}}
</div>
{{if not .Repository.IsArchived}}
<div class="column right aligned">
{{if .PageIsIssueList}}
<a class="ui green button" href="{{.RepoLink}}/issues/new{{if .NewIssueChooseTemplate}}/choose{{end}}">{{.locale.Tr "repo.issues.new"}}</a>
<a class="ui small green button" href="{{.RepoLink}}/issues/new{{if .NewIssueChooseTemplate}}/choose{{end}}">{{.locale.Tr "repo.issues.new"}}</a>
{{else}}
<a class="ui green button {{if not .PullRequestCtx.Allowed}}disabled{{end}}" href="{{if .PullRequestCtx.Allowed}}{{.Repository.Link}}/compare/{{.Repository.DefaultBranch | PathEscapeSegments}}...{{if ne .Repository.Owner.Name .PullRequestCtx.BaseRepo.Owner.Name}}{{PathEscape .Repository.Owner.Name}}:{{end}}{{.Repository.DefaultBranch | PathEscapeSegments}}{{end}}">{{.locale.Tr "repo.pulls.new"}}</a>
<a class="ui small green button new-pr-button{{if not .PullRequestCtx.Allowed}} disabled{{end}}" href="{{if .PullRequestCtx.Allowed}}{{.Repository.Link}}/compare/{{.Repository.DefaultBranch | PathEscapeSegments}}...{{if ne .Repository.Owner.Name .PullRequestCtx.BaseRepo.Owner.Name}}{{PathEscape .Repository.Owner.Name}}:{{end}}{{.Repository.DefaultBranch | PathEscapeSegments}}{{end}}">{{.locale.Tr "repo.pulls.new"}}</a>
{{end}}
</div>
{{else}}
{{if not .PageIsIssueList}}
<div class="column right aligned">
<a class="ui green button {{if not .PullRequestCtx.Allowed}}disabled{{end}}" href="{{if .PullRequestCtx.Allowed}}{{.PullRequestCtx.BaseRepo.Link}}/compare/{{.PullRequestCtx.BaseRepo.DefaultBranch | PathEscapeSegments}}...{{if ne .Repository.Owner.Name .PullRequestCtx.BaseRepo.Owner.Name}}{{PathEscape .Repository.Owner.Name}}:{{end}}{{.Repository.DefaultBranch | PathEscapeSegments}}{{end}}">{{$.locale.Tr "action.compare_commits_general"}}</a>
</div>
<a class="ui small green small button{{if not .PullRequestCtx.Allowed}} disabled{{end}}" href="{{if .PullRequestCtx.Allowed}}{{.PullRequestCtx.BaseRepo.Link}}/compare/{{.PullRequestCtx.BaseRepo.DefaultBranch | PathEscapeSegments}}...{{if ne .Repository.Owner.Name .PullRequestCtx.BaseRepo.Owner.Name}}{{PathEscape .Repository.Owner.Name}}:{{end}}{{.Repository.DefaultBranch | PathEscapeSegments}}{{end}}">{{$.locale.Tr "action.compare_commits_general"}}</a>
{{end}}
{{end}}
</div>
@ -176,7 +168,7 @@
{{end}}
<!-- Sort -->
<div class="ui dropdown downward type jump item">
<div class="list-header-sort ui small dropdown downward type jump item">
<span class="text">
{{.locale.Tr "repo.issues.filter_sort"}}
{{svg "octicon-triangle-down" 14 "dropdown icon"}}

22
templates/repo/issue/milestones.tmpl
View file

@ -6,16 +6,15 @@
{{template "repo/issue/navbar" .}}
{{if and (or .CanWriteIssues .CanWritePulls) (not .Repository.IsArchived)}}
<div class="ui right">
<a class="ui green button" href="{{$.Link}}/new">{{.locale.Tr "repo.milestones.new"}}</a>
<a class="ui small green button" href="{{$.Link}}/new">{{.locale.Tr "repo.milestones.new"}}</a>
</div>
{{end}}
</div>
<div class="ui divider"></div>
{{template "base/alert" .}}
<div class="ui three column stackable grid">
<div class="column">
<div class="ui compact tiny menu">
<div class="list-header">
<div class="small-pill-buttons ui compact tiny menu">
<a class="item{{if not .IsShowClosed}} active{{end}}" href="{{.RepoLink}}/milestones?state=open&q={{$.Keyword}}">
{{svg "octicon-milestone" 16 "gt-mr-3"}}
{{.locale.PrettyNumber .OpenCount}}&nbsp;{{.locale.Tr "repo.issues.open_title"}}
@ -25,22 +24,20 @@
{{.locale.PrettyNumber .ClosedCount}}&nbsp;{{.locale.Tr "repo.issues.closed_title"}}
</a>
</div>
</div>
<!-- Search -->
<div class="column center aligned">
<form class="ui form ignore-dirty">
<div class="ui search fluid action input">
<form class="list-header-search ui form ignore-dirty">
<div class="ui small search fluid action input">
<input type="hidden" name="state" value="{{$.State}}">
<input name="q" value="{{.Keyword}}" placeholder="{{.locale.Tr "explore.search"}}...">
<button class="ui primary button" type="submit">{{.locale.Tr "explore.search"}}</button>
<button class="ui small icon button" type="submit" aria-label="{{.locale.Tr "explore.search"}}">
{{svg "octicon-search"}}
</button>
</div>
</form>
</div>
<div class="column right aligned gt-df gt-ac gt-je">
<!-- Sort -->
<div class="ui dropdown type jump item">
<div class="list-header-sort ui small dropdown type jump item">
<span class="text">
{{.locale.Tr "repo.issues.filter_sort"}}
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
@ -55,7 +52,6 @@
</div>
</div>
</div>
</div>
<!-- milestone list -->
<div class="milestone list">

2
templates/repo/issue/navbar.tmpl
View file

@ -1,4 +1,4 @@
<h2 class="ui compact small menu header">
<h2 class="ui compact small menu header small-pill-buttons">
<a class="{{if .PageIsLabels}}active {{end}}item" href="{{.RepoLink}}/labels">{{.locale.Tr "repo.labels"}}</a>
<a class="{{if .PageIsMilestones}}active {{end}}item" href="{{.RepoLink}}/milestones">{{.locale.Tr "repo.milestones"}}</a>
</h2>

2
templates/repo/issue/openclose.tmpl
View file

@ -1,4 +1,4 @@
<div class="ui compact tiny menu">
<div class="small-pill-buttons ui compact tiny menu">
<a class="{{if not .IsShowClosed}}active {{end}}item" href="{{$.Link}}?q={{$.Keyword}}&type={{$.ViewType}}&sort={{$.SortType}}&state=open&labels={{.SelectLabels}}&milestone={{.MilestoneID}}&project={{.ProjectID}}&assignee={{.AssigneeID}}&poster={{.PosterID}}">
{{if .PageIsPullList}}
{{svg "octicon-git-pull-request" 16 "gt-mr-3"}}

8
templates/repo/issue/search.tmpl
View file

@ -1,5 +1,5 @@
<form class="ui form ignore-dirty">
<div class="ui search fluid action input">
<form class="list-header-search ui form ignore-dirty">
<div class="ui small search fluid action input">
<input type="hidden" name="type" value="{{$.ViewType}}">
<input type="hidden" name="state" value="{{$.State}}">
<input type="hidden" name="labels" value="{{.SelectLabels}}">
@ -8,6 +8,8 @@
<input type="hidden" name="assignee" value="{{$.AssigneeID}}">
<input type="hidden" name="poster" value="{{$.PosterID}}">
<input name="q" value="{{.Keyword}}" placeholder="{{.locale.Tr "explore.search"}}...">
<button class="ui primary button" type="submit">{{.locale.Tr "explore.search"}}</button>
<button class="ui small icon button" type="submit" aria-label="{{.locale.Tr "explore.search"}}">
{{svg "octicon-search"}}
</button>
</div>
</form>

4
templates/repo/projects/list.tmpl
View file

@ -6,13 +6,13 @@
{{template "repo/issue/navbar" .}}
{{if and .CanWriteProjects (not .Repository.IsArchived)}}
<div class="ui right">
<a class="ui green button" href="{{$.Link}}/new">{{.locale.Tr "repo.projects.new"}}</a>
<a class="ui small green button" href="{{$.Link}}/new">{{.locale.Tr "repo.projects.new"}}</a>
</div>
{{end}}
</div>
<div class="ui divider"></div>
{{template "base/alert" .}}
<div class="ui compact tiny menu">
<div class="small-pill-buttons ui compact tiny menu">
<a class="item{{if not .IsShowClosed}} active{{end}}" href="{{.RepoLink}}/projects?state=open">
{{svg "octicon-project" 16 "gt-mr-3"}}
{{.locale.PrettyNumber .OpenCount}}&nbsp;{{.locale.Tr "repo.issues.open_title"}}

2
templates/repo/projects/new.tmpl
View file

@ -6,7 +6,7 @@
{{template "repo/issue/navbar" .}}
{{if and .CanWriteProjects .PageIsEditProject}}
<div class="ui right floated secondary menu">
<a class="ui green button" href="{{$.RepoLink}}/projects/new">{{.locale.Tr "repo.milestones.new"}}</a>
<a class="ui small green button" href="{{$.RepoLink}}/projects/new">{{.locale.Tr "repo.milestones.new"}}</a>
</div>
{{end}}
</div>

4
templates/repo/projects/view.tmpl
View file

@ -8,8 +8,8 @@
</div>
<div class="column right aligned">
{{if and .CanWriteProjects (not .Repository.IsArchived)}}
<a class="ui green button item" href="{{$.RepoLink}}/issues/new/choose?project={{$.Project.ID}}">{{.locale.Tr "repo.issues.new"}}</a>
<a class="ui green button show-modal item" data-modal="#new-board-item">{{.locale.Tr "new_project_column"}}</a>
<a class="ui small green button item" href="{{$.RepoLink}}/issues/new/choose?project={{$.Project.ID}}">{{.locale.Tr "repo.issues.new"}}</a>
<a class="ui small green button show-modal item" data-modal="#new-board-item">{{.locale.Tr "new_project_column"}}</a>
{{end}}
<div class="ui small modal new-board-modal" id="new-board-item">
<div class="header">

2
templates/repo/sub_menu_release_tag.tmpl
View file

@ -2,7 +2,7 @@
{{$canReadCode := $.Permission.CanRead $.UnitTypeCode}}
{{if $canReadReleases}}
<h2 class="ui compact small menu header">
<h2 class="ui compact small menu header small-pill-buttons">
<a class="{{if .PageIsReleaseList}}active {{end}}item" href="{{.RepoLink}}/releases">{{.locale.Tr "repo.release.releases"}}</a>
{{if $canReadCode}}
<a class="{{if .PageIsTagList}}active {{end}}item" href="{{.RepoLink}}/tags">{{.locale.Tr "repo.release.tags"}}</a>

18
templates/user/dashboard/issues.tmpl
View file

@ -60,9 +60,8 @@
</div>
</div>
<div class="twelve wide column content">
<div class="ui three column stackable grid">
<div class="column">
<div class="ui compact tiny menu">
<div class="list-header">
<div class="small-pill-buttons ui compact tiny menu">
<a class="item{{if not .IsShowClosed}} active{{end}}" href="{{.Link}}?type={{$.ViewType}}&repos=[{{range $.RepoIDs}}{{.}}%2C{{end}}]&sort={{$.SortType}}&state=open&q={{$.Keyword}}">
{{svg "octicon-issue-opened" 16 "gt-mr-3"}}
{{.locale.PrettyNumber .IssueStats.OpenCount}}&nbsp;{{.locale.Tr "repo.issues.open_title"}}
@ -72,22 +71,18 @@
{{.locale.PrettyNumber .IssueStats.ClosedCount}}&nbsp;{{.locale.Tr "repo.issues.closed_title"}}
</a>
</div>
</div>
<div class="column center aligned">
<form class="ui form ignore-dirty">
<div class="ui search fluid action input">
<form class="list-header-search ui form ignore-dirty">
<div class="ui small search fluid action input">
<input type="hidden" name="type" value="{{$.ViewType}}">
<input type="hidden" name="repos" value="[{{range $.RepoIDs}}{{.}}%2C{{end}}]">
<input type="hidden" name="sort" value="{{$.SortType}}">
<input type="hidden" name="state" value="{{$.State}}">
<input name="q" value="{{$.Keyword}}" placeholder="{{.locale.Tr "explore.search"}}...">
<button class="ui primary button" type="submit">{{.locale.Tr "explore.search"}}</button>
<button class="ui small icon button" type="submit" aria-label="{{.locale.Tr "explore.search"}}">{{svg "octicon-search"}}</button>
</div>
</form>
</div>
<div class="column right aligned gt-df gt-ac gt-je">
<!-- Sort -->
<div class="ui dropdown type jump item">
<div class="list-header-sort ui small dropdown type jump item">
<span class="text gt-whitespace-nowrap">
{{.locale.Tr "repo.issues.filter_sort"}}
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
@ -111,7 +106,6 @@
{{end}}
{{end}}
</div>
</div>
{{template "shared/issuelist" dict "." . "listType" "dashboard"}}
</div>
</div>

18
templates/user/dashboard/milestones.tmpl
View file

@ -34,9 +34,8 @@
</div>
</div>
<div class="twelve wide column content">
<div class="ui three column stackable grid">
<div class="column">
<div class="ui compact tiny menu">
<div class="list-header">
<div class="small-pill-buttons ui compact tiny menu">
<a class="item{{if not .IsShowClosed}} active{{end}}" href="{{.Link}}?repos=[{{range $.RepoIDs}}{{.}}%2C{{end}}]&sort={{$.SortType}}&state=open&q={{$.Keyword}}">
{{svg "octicon-milestone" 16 "gt-mr-3"}}
{{.locale.PrettyNumber .MilestoneStats.OpenCount}}&nbsp;{{.locale.Tr "repo.issues.open_title"}}
@ -46,22 +45,18 @@
{{.locale.PrettyNumber .MilestoneStats.ClosedCount}}&nbsp;{{.locale.Tr "repo.issues.closed_title"}}
</a>
</div>
</div>
<div class="column center aligned">
<form class="ui form ignore-dirty">
<div class="ui search fluid action input">
<form class="list-header-search ui form ignore-dirty">
<div class="ui small search fluid action input">
<input type="hidden" name="type" value="{{$.ViewType}}">
<input type="hidden" name="repos" value="[{{range $.RepoIDs}}{{.}},{{end}}]">
<input type="hidden" name="sort" value="{{$.SortType}}">
<input type="hidden" name="state" value="{{$.State}}">
<input name="q" value="{{$.Keyword}}" placeholder="{{.locale.Tr "explore.search"}}...">
<button class="ui primary button" type="submit">{{.locale.Tr "explore.search"}}</button>
<button class="ui small icon button" type="submit" aria-label="{{.locale.Tr "explore.search"}}">{{svg "octicon-search"}}</button>
</div>
</form>
</div>
<div class="column right aligned gt-df gt-ac gt-je">
<!-- Sort -->
<div class="ui dropdown type jump item">
<div class="list-header-sort ui dropdown type jump item">
<span class="text">
{{.locale.Tr "repo.issues.filter_sort"}}
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
@ -76,7 +71,6 @@
</div>
</div>
</div>
</div>
<div class="milestone list">
{{range .Milestones}}
<li class="item">

2
templates/user/notification/notification_subscriptions.tmpl
View file

@ -13,7 +13,7 @@
{{if eq .Status 1}}
<div id="issue-filters" class="ui stackable grid">
<div class="six wide column">
<div class="ui compact tiny menu">
<div class="small-pill-buttons ui compact tiny menu">
<a class="{{if eq .State "all"}}active {{end}}item" href="{{$.Link}}?sort={{$.SortType}}&state=all&issueType={{$.IssueType}}&labels={{$.Labels}}">
{{.locale.Tr "all"}}
</a>

2
tests/integration/pull_compare_test.go
View file

@ -19,7 +19,7 @@ func TestPullCompare(t *testing.T) {
req := NewRequest(t, "GET", "/user2/repo1/pulls")
resp := session.MakeRequest(t, req, http.StatusOK)
htmlDoc := NewHTMLParser(t, resp.Body)
link, exists := htmlDoc.doc.Find(".ui.three.column.grid").Find(".ui.green.button").Attr("href")
link, exists := htmlDoc.doc.Find(".new-pr-button").Attr("href")
assert.True(t, exists, "The template has changed")
req = NewRequest(t, "GET", link)

19
web_src/css/base.css
View file

@ -769,6 +769,10 @@ a.label,
border-color: var(--color-primary);
}
.ui.action.input .button {
border-color: var(--color-input-border);
}
/* currently used for search bar dropdowns in repo search and explore code */
.ui.action.input:not([class*="left action"]) > .ui.dropdown.selection {
min-width: 10em;
@ -778,10 +782,21 @@ a.label,
border-right-color: transparent;
}
.ui.action.input:not([class*="left action"]) > input:hover {
border-right-color: transparent;
}
.ui.action.input:not([class*="left action"]) > input:focus {
border-right-color: var(--color-primary);
}
/* fix button enlarged vertically by svg icon */
/* TODO: change to just `.small.button:has(svg)` but may have global side effects */
.ui.action.input .small.button:has(svg) {
padding-top: 7px !important;
padding-bottom: 7px !important;
}
.ui.menu,
.ui.vertical.menu {
background: var(--color-menu);
@ -830,6 +845,10 @@ a.label,
color: var(--color-text-light-3);
}
.ui.menu .item::before {
background: var(--color-secondary);
}
/* sub menu of vertical menu */
.ui.vertical.menu .item .menu .item {
color: var(--color-text-light-2);

1
web_src/css/index.css
View file

@ -32,6 +32,7 @@
@import "./repository.css";
@import "./repository/release-tag.css";
@import "./repository/issue-label.css";
@import "./repository/list-header.css";
@import "./editor.css";
@import "./editor/combomarkdowneditor.css";
@import "./organization.css";

14
web_src/css/repository.css
View file

@ -161,7 +161,7 @@
.repository .ui.tabs.divider {
margin-top: -1px;
margin-bottom: 20px;
margin-bottom: 12px;
}
.repository #clone-panel #repo-clone-url {
@ -3289,18 +3289,6 @@ td.blob-excerpt {
.repository.file.list #repo-files-table .commit-list span.commit-summary {
display: none !important;
}
.issue-list-headers.ui[class].grid > div:nth-child(1) {
order: 1;
width: 50%;
}
.issue-list-headers.ui[class].grid > div:nth-child(2) {
order: 3;
width: 100%;
}
.issue-list-headers.ui[class].grid > div.column:not(.row):nth-child(3) {
order: 2;
width: 50%;
}
.repository.view.issue .comment-list .timeline,
.repository.view.issue .comment-list .timeline-item {
margin-left: 0;

36
web_src/css/repository/list-header.css Normal file
View file

@ -0,0 +1,36 @@
.list-header {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: .5rem;
}
.list-header-sort {
display: flex;
align-items: center;
justify-content: flex-end;
padding-left: 1rem;
padding-right: 1rem;
}
.list-header-search {
display: flex;
flex: 1;
align-items: center;
flex-wrap: wrap;
justify-content: center;
min-width: 200px; /* to enable flexbox wrapping on mobile */
}
.list-header-search .input {
flex: 1;
}
.small-pill-buttons {
min-height: 35.4px !important; /* match .small.button in height */
}
.small-pill-buttons .item {
padding-top: 6px !important;
padding-bottom: 6px !important;
}