Files
gitea/templates/org/header.tmpl
Shudhanshu Singh 9c08df8bc8 fix(org): align follow button and wrap description (#38448)
### Description
Fixes the organization page header layout issue where:
1. Long organization descriptions did not wrap and instead stretched the
header container out of bounds.
2. The "Follow" button floated dynamically adjacent to the description's
right edge depending on the description length, instead of remaining at
a fixed position aligned with the right edge of the page container.

Fixes https://github.com/go-gitea/gitea/issues/38445
### Cause
The flex container `<div class="flex-relaxed-list">` lacked `tw-flex-1`
(to grow to fill the container) and `tw-min-w-0` (to allow it to shrink
below its content's size). Consequently, the flex minimum width
defaulted to `min-content`, stretching the container for long unwrapped
descriptions.

### Solution
Added `tw-flex-1 tw-min-w-0` to the `<div class="flex-relaxed-list">`
container in `templates/org/header.tmpl`. This restricts the width,
enables proper text wrapping, and fixes the "Follow" button to the right
edge of the content container.

### Screenshots
Before
<img width="1300" height="615" alt="image"
src="https://github.com/user-attachments/assets/11e6ab99-b847-45ff-8bdb-8622bfeee8aa"
/>
After
<img width="1300" height="615" alt="image"
src="https://github.com/user-attachments/assets/84ac0633-b192-4be5-8226-13bfad3ab2ec"
/>

---------

Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
2026-07-14 17:54:55 +00:00

39 lines
1.5 KiB
Handlebars

<div class="ui container flex-container">
<div>{{ctx.AvatarUtils.Avatar .Org 100}}</div>
<div class="flex-relaxed-list tw-flex-1">
<div class="ui header flex-left-right tw-m-0">
<div class="flex-text-block">
<span class="tw-text-2xl">{{.Org.DisplayName}}</span>
{{if .Org.Visibility.IsLimited}}<span class="ui large basic horizontal label">{{ctx.Locale.Tr "org.settings.visibility.limited_shortname"}}</span>{{end}}
{{if .Org.Visibility.IsPrivate}}<span class="ui large basic horizontal label">{{ctx.Locale.Tr "org.settings.visibility.private_shortname"}}</span>{{end}}
</div>
<div class="flex-text-block">
{{if .EnableFeed}}
<a class="ui basic label button" href="{{.Org.HomeLink}}.rss" data-tooltip-content="{{ctx.Locale.Tr "rss_feed"}}">
{{svg "octicon-rss" 24}}
</a>
{{end}}
{{if .IsSigned}}
{{template "org/follow_unfollow" .}}
{{end}}
</div>
</div>
{{if .RenderedDescription}}
<div class="render-content markup">{{.RenderedDescription}}</div>
{{end}}
<div>
{{if .Org.Location}}
<div class="flex-text-block">{{svg "octicon-location"}} <span>{{.Org.Location}}</span></div>
{{end}}
{{if .Org.Website}}
<div class="flex-text-block">{{svg "octicon-link"}} <a class="muted" target="_blank" rel="me" href="{{.Org.Website}}">{{.Org.Website}}</a></div>
{{end}}
{{if and .IsSigned .Org.Email}}
<div class="flex-text-block">{{svg "octicon-mail"}} <a class="muted" href="mailto:{{.Org.Email}}">{{.Org.Email}}</a></div>
{{end}}
</div>
</div>
</div>
{{template "org/menu" .}}