diff --git a/templates/projects/list.tmpl b/templates/projects/list.tmpl index e9e86e5d5d5..bde9925ab98 100644 --- a/templates/projects/list.tmpl +++ b/templates/projects/list.tmpl @@ -35,33 +35,36 @@ -
+
{{range .Projects}} -
  • - {{svg .IconName}} {{.Title}} -
    - {{$closedDate:= TimeSinceUnix .ClosedDateUnix $.locale}} - {{if .IsClosed}} - {{svg "octicon-clock"}} {{$.locale.Tr "repo.milestones.closed" $closedDate | Safe}} +
  • +

    + {{svg .IconName 16}} + {{.Title}} +

    +
    +
    +
    + {{svg "octicon-issue-opened" 14}} + {{$.locale.PrettyNumber .NumOpenIssues}} {{$.locale.Tr "repo.issues.open_title"}} +
    +
    + {{svg "octicon-check" 14}} + {{$.locale.PrettyNumber .NumClosedIssues}} {{$.locale.Tr "repo.issues.closed_title"}} +
    +
    + {{if and $.CanWriteProjects (not $.Repository.IsArchived)}} +
    + {{svg "octicon-pencil" 14}}{{$.locale.Tr "repo.issues.label_edit"}} + {{if .IsClosed}} + {{svg "octicon-check" 14}}{{$.locale.Tr "repo.projects.open"}} + {{else}} + {{svg "octicon-skip" 14}}{{$.locale.Tr "repo.projects.close"}} + {{end}} + {{svg "octicon-trash" 14}}{{$.locale.Tr "repo.issues.label_delete"}} tesssst +
    {{end}} - - {{svg "octicon-issue-opened" 16 "gt-mr-3"}} - {{$.locale.PrettyNumber .NumOpenIssues}} {{$.locale.Tr "repo.issues.open_title"}} - {{svg "octicon-check" 16 "gt-mr-3"}} - {{$.locale.PrettyNumber .NumClosedIssues}} {{$.locale.Tr "repo.issues.closed_title"}} -
    - {{if and $.CanWriteProjects (not $.Repository.IsArchived)}} -
    - {{svg "octicon-pencil"}} {{$.locale.Tr "repo.issues.label_edit"}} - {{if .IsClosed}} - {{svg "octicon-check"}} {{$.locale.Tr "repo.projects.open"}} - {{else}} - {{svg "octicon-skip"}} {{$.locale.Tr "repo.projects.close"}} - {{end}} - {{svg "octicon-trash"}} {{$.locale.Tr "repo.issues.label_delete"}} -
    - {{end}} {{if .Description}}
    {{.RenderedContent|Str2html}} diff --git a/templates/projects/view.tmpl b/templates/projects/view.tmpl index a7209e0c217..58dbca2a4bd 100644 --- a/templates/projects/view.tmpl +++ b/templates/projects/view.tmpl @@ -46,7 +46,7 @@ {{if $.CanWriteProjects}}
    - + {{svg "octicon-pencil"}} {{$.locale.Tr "repo.issues.label_edit"}} diff --git a/templates/repo/activity.tmpl b/templates/repo/activity.tmpl index 9d15cec051b..ed29ece1378 100644 --- a/templates/repo/activity.tmpl +++ b/templates/repo/activity.tmpl @@ -2,25 +2,24 @@
    {{template "repo/header" .}}
    -

    {{DateTime "long" .DateFrom}} - {{DateTime "long" .DateUntil}} -
    - -
    -
    - - {{.locale.Tr "repo.activity.period.filter_label"}} {{.PeriodText}} - {{svg "octicon-triangle-down" 14 "dropdown icon"}} - -
    -
    - {{.locale.Tr "repo.activity.period.daily"}} - {{.locale.Tr "repo.activity.period.halfweekly"}} - {{.locale.Tr "repo.activity.period.weekly"}} - {{.locale.Tr "repo.activity.period.monthly"}} - {{.locale.Tr "repo.activity.period.quarterly"}} - {{.locale.Tr "repo.activity.period.semiyearly"}} - {{.locale.Tr "repo.activity.period.yearly"}} -
    +

    + {{DateTime "long" .DateFrom}} - {{DateTime "long" .DateUntil}} + +
    +
    + + {{.locale.Tr "repo.activity.period.filter_label"}} {{.PeriodText}} + {{svg "octicon-triangle-down" 14 "dropdown icon"}} + +
    +
    + {{.locale.Tr "repo.activity.period.daily"}} + {{.locale.Tr "repo.activity.period.halfweekly"}} + {{.locale.Tr "repo.activity.period.weekly"}} + {{.locale.Tr "repo.activity.period.monthly"}} + {{.locale.Tr "repo.activity.period.quarterly"}} + {{.locale.Tr "repo.activity.period.semiyearly"}} + {{.locale.Tr "repo.activity.period.yearly"}}

    diff --git a/templates/repo/empty.tmpl b/templates/repo/empty.tmpl index ed726db5123..50f209b460f 100644 --- a/templates/repo/empty.tmpl +++ b/templates/repo/empty.tmpl @@ -26,7 +26,7 @@

    {{.locale.Tr "repo.clone_this_repo"}} {{.locale.Tr "repo.clone_helper" "http://git-scm.com/book/en/Git-Basics-Getting-a-Git-Repository" | Str2html}}

    -
    +
    {{if and .CanWriteCode (not .Repository.IsArchived)}} {{.locale.Tr "repo.editor.new_file"}} @@ -44,7 +44,7 @@
    {{if not .Repository.IsArchived}} -
    +

    {{.locale.Tr "repo.create_new_repo_command"}}

    diff --git a/templates/repo/issue/list.tmpl b/templates/repo/issue/list.tmpl index 3323bf893e0..313f7d6e988 100644 --- a/templates/repo/issue/list.tmpl +++ b/templates/repo/issue/list.tmpl @@ -71,13 +71,13 @@ {{template "repo/issue/search" .}} {{if not .Repository.IsArchived}} {{if .PageIsIssueList}} -     {{.locale.Tr "repo.issues.new"}} + {{.locale.Tr "repo.issues.new"}} {{else}} - {{.locale.Tr "repo.pulls.new"}} + {{.locale.Tr "repo.pulls.new"}} {{end}} {{else}} {{if not .PageIsIssueList}} - {{$.locale.Tr "action.compare_commits_general"}} + {{$.locale.Tr "action.compare_commits_general"}} {{end}} {{end}}
    diff --git a/templates/repo/issue/milestones.tmpl b/templates/repo/issue/milestones.tmpl index d7e782e20d6..46bb0608773 100644 --- a/templates/repo/issue/milestones.tmpl +++ b/templates/repo/issue/milestones.tmpl @@ -13,7 +13,7 @@ {{template "base/alert" .}}
    -
    +
    {{svg "octicon-milestone" 16 "gt-mr-3"}} {{.locale.PrettyNumber .OpenCount}} {{.locale.Tr "repo.issues.open_title"}} @@ -53,50 +53,70 @@
    -
    +
    {{range .Milestones}} -
  • -
    -

    - {{svg "octicon-milestone" 16 "gt-mr-3"}}{{.Name}} +
  • +
    +

    + {{svg "octicon-milestone" 16}} + {{.Name}}

    {{.Completeness}}%
    -
    - {{$closedDate:= TimeSinceUnix .ClosedDateUnix $.locale}} - {{if .IsClosed}} - {{svg "octicon-clock"}} {{$.locale.Tr "repo.milestones.closed" $closedDate | Safe}} - {{else}} - {{svg "octicon-calendar"}} - {{if .DeadlineString}} - {{DateTime "short" .DeadlineString}} - {{else}} - {{$.locale.Tr "repo.milestones.no_due_date"}} +
    +
    +
    + {{svg "octicon-issue-opened" 14}} + {{$.locale.PrettyNumber .NumOpenIssues}} {{$.locale.Tr "repo.issues.open_title"}} +
    +
    + {{svg "octicon-check" 14}} + {{$.locale.PrettyNumber .NumClosedIssues}} {{$.locale.Tr "repo.issues.closed_title"}} +
    + {{if .TotalTrackedTime}} +
    + {{svg "octicon-clock"}} + {{.TotalTrackedTime|Sec2Time}} +
    {{end}} - {{end}} - - {{svg "octicon-issue-opened" 16 "gt-mr-3"}} - {{$.locale.PrettyNumber .NumOpenIssues}} {{$.locale.Tr "repo.issues.open_title"}} - {{svg "octicon-check" 16 "gt-mr-3"}} - {{$.locale.PrettyNumber .NumClosedIssues}} {{$.locale.Tr "repo.issues.closed_title"}} - {{if .TotalTrackedTime}}{{svg "octicon-clock"}} {{.TotalTrackedTime|Sec2Time}}{{end}} - {{if .UpdatedUnix}}{{svg "octicon-clock"}} {{$.locale.Tr "repo.milestones.update_ago" (TimeSinceUnix .UpdatedUnix $.locale) | Safe}}{{end}} - -
    - {{if and (or $.CanWriteIssues $.CanWritePulls) (not $.Repository.IsArchived)}} -
    - {{svg "octicon-pencil"}} {{$.locale.Tr "repo.issues.label_edit"}} - {{if .IsClosed}} - {{svg "octicon-check"}} {{$.locale.Tr "repo.milestones.open"}} - {{else}} - {{svg "octicon-x"}} {{$.locale.Tr "repo.milestones.close"}} + {{if .UpdatedUnix}} +
    + {{svg "octicon-clock"}} + {{$.locale.Tr "repo.milestones.update_ago" (TimeSinceUnix .UpdatedUnix $.locale) | Safe}} +
    {{end}} - {{svg "octicon-trash"}} {{$.locale.Tr "repo.issues.label_delete"}} +
    + {{if .IsClosed}} + {{$closedDate:= TimeSinceUnix .ClosedDateUnix $.locale}} + {{svg "octicon-clock" 14}} + {{$.locale.Tr "repo.milestones.closed" $closedDate | Safe}} + {{else}} + {{svg "octicon-calendar" 14}} + {{if .DeadlineString}} + + {{DateTime "short" .DeadlineString}} + + {{else}} + {{$.locale.Tr "repo.milestones.no_due_date"}} + {{end}} + {{end}} +
    - {{end}} + {{if and (or $.CanWriteIssues $.CanWritePulls) (not $.Repository.IsArchived)}} +
    + {{svg "octicon-pencil" 14}}{{$.locale.Tr "repo.issues.label_edit"}} + {{if .IsClosed}} + {{svg "octicon-check" 14}}{{$.locale.Tr "repo.milestones.open"}} + {{else}} + {{svg "octicon-x" 14}}{{$.locale.Tr "repo.milestones.close"}} + {{end}} + {{svg "octicon-trash" 14}}{{$.locale.Tr "repo.issues.label_delete"}} +
    + {{end}} +
    {{if .Content}}
    {{.RenderedContent|Str2html}} diff --git a/templates/repo/issue/navbar.tmpl b/templates/repo/issue/navbar.tmpl index 944c6b194a5..2f1ea7a659a 100644 --- a/templates/repo/issue/navbar.tmpl +++ b/templates/repo/issue/navbar.tmpl @@ -1,4 +1,4 @@ -

    +

    {{.locale.Tr "repo.labels"}} {{.locale.Tr "repo.milestones"}}

    diff --git a/templates/repo/issue/search.tmpl b/templates/repo/issue/search.tmpl index 97b22d36990..13224680bd0 100644 --- a/templates/repo/issue/search.tmpl +++ b/templates/repo/issue/search.tmpl @@ -1,4 +1,4 @@ -
    +
    diff --git a/templates/repo/projects/list.tmpl b/templates/repo/projects/list.tmpl index a5f99cee66a..674c6bfb626 100644 --- a/templates/repo/projects/list.tmpl +++ b/templates/repo/projects/list.tmpl @@ -2,7 +2,7 @@
    {{template "repo/header" .}}
    -
    +
    -
    +
    @@ -35,33 +35,36 @@
    {{template "base/alert" .}} -
    +
    {{range .Projects}} -
  • - {{svg .IconName}} {{.Title}} -
    - {{$closedDate:= TimeSinceUnix .ClosedDateUnix $.locale}} - {{if .IsClosed}} - {{svg "octicon-clock"}} {{$.locale.Tr "repo.milestones.closed" $closedDate | Safe}} - {{end}} - - {{svg "octicon-issue-opened" 16 "gt-mr-3"}} - {{$.locale.PrettyNumber .NumOpenIssues}} {{$.locale.Tr "repo.issues.open_title"}} - {{svg "octicon-check" 16 "gt-mr-3"}} - {{$.locale.PrettyNumber .NumClosedIssues}} {{$.locale.Tr "repo.issues.closed_title"}} - -
    - {{if and $.CanWriteProjects (not $.Repository.IsArchived)}} -
    - {{svg "octicon-pencil"}} {{$.locale.Tr "repo.issues.label_edit"}} - {{if .IsClosed}} - {{svg "octicon-check"}} {{$.locale.Tr "repo.projects.open"}} - {{else}} - {{svg "octicon-skip"}} {{$.locale.Tr "repo.projects.close"}} +
  • +

    + {{svg .IconName 16}} + {{.Title}} +

    +
    +
    +
    + {{svg "octicon-issue-opened" 14}} + {{$.locale.PrettyNumber .NumOpenIssues}} {{$.locale.Tr "repo.issues.open_title"}} +
    +
    + {{svg "octicon-check" 14}} + {{$.locale.PrettyNumber .NumClosedIssues}} {{$.locale.Tr "repo.issues.closed_title"}} +
    +
    + {{if and $.CanWriteProjects (not $.Repository.IsArchived)}} +
    + {{svg "octicon-pencil" 14}}{{$.locale.Tr "repo.issues.label_edit"}} + {{if .IsClosed}} + {{svg "octicon-check" 14}}{{$.locale.Tr "repo.projects.open"}} + {{else}} + {{svg "octicon-skip" 14}}{{$.locale.Tr "repo.projects.close"}} + {{end}} + {{svg "octicon-trash" 14}}{{$.locale.Tr "repo.issues.label_delete"}} +
    {{end}} - {{svg "octicon-trash"}} {{$.locale.Tr "repo.issues.label_delete"}}
    - {{end}} {{if .Description}}
    {{.RenderedContent|Str2html}} diff --git a/templates/repo/projects/view.tmpl b/templates/repo/projects/view.tmpl index 068c42838a5..f8215cbee1c 100644 --- a/templates/repo/projects/view.tmpl +++ b/templates/repo/projects/view.tmpl @@ -50,7 +50,7 @@ {{if and $.CanWriteProjects (not $.Repository.IsArchived)}}
    - + {{svg "octicon-pencil"}} {{$.locale.Tr "repo.issues.label_edit"}} diff --git a/templates/user/dashboard/issues.tmpl b/templates/user/dashboard/issues.tmpl index cbb153a343b..e7762c5a936 100644 --- a/templates/user/dashboard/issues.tmpl +++ b/templates/user/dashboard/issues.tmpl @@ -61,7 +61,7 @@
    -
    +
    {{svg "octicon-issue-opened" 16 "gt-mr-3"}} {{.locale.PrettyNumber .IssueStats.OpenCount}} {{.locale.Tr "repo.issues.open_title"}} diff --git a/templates/user/dashboard/milestones.tmpl b/templates/user/dashboard/milestones.tmpl index 372d3c7b99f..23b7b27116b 100644 --- a/templates/user/dashboard/milestones.tmpl +++ b/templates/user/dashboard/milestones.tmpl @@ -35,7 +35,7 @@
    -
    +
    {{svg "octicon-milestone" 16 "gt-mr-3"}} {{.locale.PrettyNumber .MilestoneStats.OpenCount}} {{.locale.Tr "repo.issues.open_title"}} @@ -71,52 +71,73 @@
    -
    +
    {{range .Milestones}} -
  • -
    -

    - {{.Repo.FullName}} - {{svg "octicon-milestone" 16 "gt-mr-3"}}{{.Name}} +
  • +
    +

    + + {{.Repo.FullName}} + + {{svg "octicon-milestone" 16}} + {{.Name}}

    {{.Completeness}}%
    -
    - {{$closedDate:= TimeSinceUnix .ClosedDateUnix $.locale}} - {{if .IsClosed}} - {{svg "octicon-clock"}} {{$.locale.Tr "repo.milestones.closed" $closedDate | Safe}} - {{else}} - {{svg "octicon-calendar"}} - {{if .DeadlineString}} - {{DateTime "short" .DeadlineString}} - {{else}} - {{$.locale.Tr "repo.milestones.no_due_date"}} - {{end}} - {{end}} - - {{svg "octicon-issue-opened" 16 "gt-mr-3"}} - {{$.locale.PrettyNumber .NumOpenIssues}} {{$.locale.Tr "repo.issues.open_title"}} - {{svg "octicon-check" 16 "gt-mr-3"}} - {{$.locale.PrettyNumber .NumClosedIssues}} {{$.locale.Tr "repo.issues.closed_title"}} +
    +
    +
    + {{svg "octicon-issue-opened" 14}} + {{$.locale.PrettyNumber .NumOpenIssues}} {{$.locale.Tr "repo.issues.open_title"}} +
    +
    + {{svg "octicon-check" 14}} + {{$.locale.PrettyNumber .NumClosedIssues}} {{$.locale.Tr "repo.issues.closed_title"}} +
    {{if .TotalTrackedTime}} - {{svg "octicon-clock"}} {{.TotalTrackedTime|Sec2Time}} +
    + {{svg "octicon-clock"}} + {{.TotalTrackedTime|Sec2Time}} +
    {{end}} - -
    - {{if and (or $.CanWriteIssues $.CanWritePulls) (not $.Repository.IsArchived)}} -
    - {{svg "octicon-pencil"}} {{$.locale.Tr "repo.issues.label_edit"}} - {{if .IsClosed}} - {{svg "octicon-check"}} {{$.locale.Tr "repo.milestones.open"}} - {{else}} - {{svg "octicon-x"}} {{$.locale.Tr "repo.milestones.close"}} + {{if .UpdatedUnix}} +
    + {{svg "octicon-clock"}} + {{$.locale.Tr "repo.milestones.update_ago" (TimeSinceUnix .UpdatedUnix $.locale) | Safe}} +
    {{end}} - {{svg "octicon-trash"}} {{$.locale.Tr "repo.issues.label_delete"}} +
    + {{if .IsClosed}} + {{$closedDate:= TimeSinceUnix .ClosedDateUnix $.locale}} + {{svg "octicon-clock" 14}} + {{$.locale.Tr "repo.milestones.closed" $closedDate | Safe}} + {{else}} + {{svg "octicon-calendar" 14}} + {{if .DeadlineString}} + + {{DateTime "short" .DeadlineString}} + + {{else}} + {{$.locale.Tr "repo.milestones.no_due_date"}} + {{end}} + {{end}} +
    - {{end}} + {{if and (or $.CanWriteIssues $.CanWritePulls) (not $.Repository.IsArchived)}} +
    + {{svg "octicon-pencil" 14}}{{$.locale.Tr "repo.issues.label_edit"}} + {{if .IsClosed}} + {{svg "octicon-check" 14}}{{$.locale.Tr "repo.milestones.open"}} + {{else}} + {{svg "octicon-x" 14}}{{$.locale.Tr "repo.milestones.close"}} + {{end}} + {{svg "octicon-trash" 14}}{{$.locale.Tr "repo.issues.label_delete"}} +
    + {{end}} +
    {{if .Content}}
    {{.RenderedContent|Str2html}} diff --git a/web_src/css/index.css b/web_src/css/index.css index c9cc1d8032b..125249ceab9 100644 --- a/web_src/css/index.css +++ b/web_src/css/index.css @@ -9,6 +9,7 @@ @import "./modules/comment.css"; @import "./shared/issuelist.css"; +@import "./shared/milestone.css"; @import "./shared/repoorg.css"; @import "./shared/settings.css"; diff --git a/web_src/css/repo.css b/web_src/css/repo.css index 4c42f9f0859..3896265ddaa 100644 --- a/web_src/css/repo.css +++ b/web_src/css/repo.css @@ -87,6 +87,18 @@ } } +.projects-header { + margin-bottom: 1rem; + flex-direction: column; + gap: 8px; +} + +.projects-toolbar { + display: flex; + justify-content: space-between; + padding-left: 4px; +} + .repository .issue-content-right .menu { overflow-x: auto; max-height: 500px; @@ -225,6 +237,14 @@ align-items: center; } +@media (max-width: 767.68px) { + .repository.file.list .repo-description { + flex-direction: column; + gap: 8px; + align-items: normal; + } +} + .repository.file.list #repo-desc { font-size: 1.2em; } @@ -1167,56 +1187,6 @@ margin-top: -8px; } -.repository .milestone.list { - list-style: none; -} - -.repository .milestone.list > .item { - padding-top: 10px; - padding-bottom: 10px; -} - -.repository .milestone.list > .item + .item { - border-top: 1px solid var(--color-secondary); -} - -.repository .milestone.list > .item progress { - width: 200px; - height: 16px; -} - -.repository .milestone.list > .item .meta { - color: var(--color-text-light-2); - padding-top: 5px; -} - -.repository .milestone.list > .item .meta .issue-stats .svg { - padding-left: 5px; -} - -.repository .milestone.list > .item .meta .overdue { - color: var(--color-red); -} - -.repository .milestone.list > .item .operate { - margin-top: -15px; -} - -.repository .milestone.list > .item .operate > a { - font-size: 15px; - padding-top: 5px; - padding-right: 10px; - color: var(--color-text-light-2); -} - -.repository .milestone.list > .item .operate > a:hover { - color: var(--color-text); -} - -.repository .milestone.list > .item .content { - padding-top: 10px; -} - .repository.new.milestone textarea { height: 200px; } @@ -1964,6 +1934,13 @@ } } +.repository .activity-header { + display: flex; + justify-content: space-between; + gap: 8px; + flex-wrap: wrap; +} + .repository.settings.collaboration .collaborator.list { padding: 0; } @@ -3381,6 +3358,12 @@ tbody.commit-list { margin-bottom: 8px; } +@media (max-width: 767.98px) { + #issue-pins { + grid-template-columns: repeat(1, 1fr); + } +} + .pinned-issue-card { border-radius: var(--border-radius); padding: 8px 10px; diff --git a/web_src/css/repo/issue-list.css b/web_src/css/repo/issue-list.css index dde3e7f19f8..ddd425d068b 100644 --- a/web_src/css/repo/issue-list.css +++ b/web_src/css/repo/issue-list.css @@ -13,3 +13,23 @@ .issue-list-toolbar-right { margin-left: auto; } + +@media (max-width: 767.98px) { + .issue-list-toolbar { + flex-direction: column-reverse; + } + .issue-list-toolbar-right { + margin-right: auto; + width: 100%; + } + .issue-list-navbar { + order: 0; + } + .issue-list-new { + order: 1; + margin-left: auto !important; + } + .issue-list-search { + order: 2 !important; + } +} diff --git a/web_src/css/repo/list-header.css b/web_src/css/repo/list-header.css index 69539b035b2..304cfbc13c9 100644 --- a/web_src/css/repo/list-header.css +++ b/web_src/css/repo/list-header.css @@ -8,7 +8,6 @@ .list-header-sort { display: flex; align-items: center; - justify-content: flex-end; padding-left: 1rem; padding-right: 1rem; } @@ -44,3 +43,16 @@ .small-menu-items .item.active { background: var(--color-active) !important; } + +@media (max-width: 767.98px) { + .list-header-search { + order: 0; + } + .list-header-toggle { + order: 1; + } + .list-header-sort { + order: 2; + margin-left: auto; + } +} diff --git a/web_src/css/shared/milestone.css b/web_src/css/shared/milestone.css new file mode 100644 index 00000000000..511a1be714e --- /dev/null +++ b/web_src/css/shared/milestone.css @@ -0,0 +1,66 @@ +.milestone-list { + list-style: none; +} + +.milestone-card { + width: 100%; + padding-top: 10px; + padding-bottom: 10px; +} + +.milestone-card + .milestone-card { + border-top: 1px solid var(--color-secondary); +} + +.milestone-card .content { + padding-top: 10px; +} + +.milestone-header progress { + width: 200px; + height: 16px; +} + +.milestone-header { + display: flex; + align-items: center; + margin: 0; + flex-wrap: wrap; + justify-content: space-between; +} + +.milestone-toolbar { + padding-top: 5px; + display: flex; + flex-wrap: wrap; + gap: 8px; + justify-content: space-between; +} + +.milestone-toolbar .group { + color: var(--color-text-light-2); + display: flex; + flex-wrap: wrap; + gap: 8px; +} + +.milestone-toolbar .group .overdue { + color: var(--color-red); +} + +.milestone-toolbar .group > a { + font-size: 15px; + color: var(--color-text-light-2); +} + +.milestone-toolbar .group > a:hover { + color: var(--color-text); +} + +@media (max-width: 767.98px) { + .milestone-card { + display: flex; + flex-direction: column; + gap: 8px; + } +}