mirror of
https://github.com/go-gitea/gitea.git
synced 2026-07-15 03:17:10 +02:00
9c08df8bc8
### 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>
131 lines
2.9 KiB
CSS
131 lines
2.9 KiB
CSS
/* can be used to replace "ui relaxed list" or "tw-flex tw-flex-col tw-gap-xxx" when we need more flexible layout */
|
|
.flex-relaxed-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--gap-block);
|
|
min-width: 0; /* keep the same style as "flex-text-block" etc, make the text content wrap/ellipse correctly */
|
|
max-width: 100%;
|
|
}
|
|
|
|
.flex-relaxed-list > .divider {
|
|
margin: 0;
|
|
}
|
|
|
|
/* items have dividers between them, the dividers align with items */
|
|
.flex-divided-list,
|
|
.flex-divided-list > .item.flex-divided-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
gap: 0;
|
|
}
|
|
|
|
.flex-divided-list > .item {
|
|
padding: 10px 0;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.flex-divided-list > .divider {
|
|
margin: 0;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.flex-divided-list > .item + .item {
|
|
border-top: 1px solid var(--color-secondary);
|
|
}
|
|
|
|
.items-with-main > .item {
|
|
display: flex;
|
|
gap: var(--gap-block);
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.items-with-main > .item .item-leading {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.items-with-main > .item .item-main {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--gap-inline);
|
|
flex-grow: 1;
|
|
flex-basis: 60%; /* avoid wrapping the "item-trailing" too aggressively */
|
|
min-width: 0; /* make the "text truncate" work, otherwise the flex axis is not limited and the text just overflows */
|
|
}
|
|
|
|
.items-with-main > .item .item-header {
|
|
display: flex;
|
|
gap: var(--gap-inline);
|
|
justify-content: space-between;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.items-with-main > .item a:not(.label, .button):hover {
|
|
color: var(--color-primary) !important;
|
|
}
|
|
|
|
.items-with-main > .item .item-trailing {
|
|
display: flex;
|
|
gap: var(--gap-block);
|
|
align-items: center;
|
|
flex-grow: 0;
|
|
flex-wrap: wrap;
|
|
justify-content: end;
|
|
}
|
|
|
|
.items-with-main > .item .item-title {
|
|
display: inline-flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: var(--gap-inline);
|
|
max-width: 100%;
|
|
color: var(--color-text);
|
|
font-size: 16px;
|
|
font-weight: var(--font-weight-semibold);
|
|
overflow-wrap: anywhere;
|
|
min-width: 0;
|
|
}
|
|
|
|
.items-with-main > .item .item-title a {
|
|
color: var(--color-text);
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.items-with-main > .item .item-body {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
gap: var(--gap-inline);
|
|
color: var(--color-text-light-2);
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.items-with-main > .item .item-body a {
|
|
color: inherit;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
/* special rules to make the list work with existing UI elements */
|
|
.flex-divided-list.items-px-default > .item {
|
|
padding-left: 1em; /* matches ".ui.segment" padding */
|
|
padding-right: 1em;
|
|
}
|
|
|
|
.ui.segment:not(.fitted) > .flex-divided-list > .item:first-child {
|
|
padding-top: 0;
|
|
}
|
|
|
|
.ui.segment:not(.fitted) > .flex-divided-list > .item:last-child {
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
/* If there is a divider besides the flex-list, some padding/margin are not needs */
|
|
.divider + .flex-divided-list > .item:first-child {
|
|
padding-top: 0;
|
|
}
|
|
|
|
.flex-divided-list + .divider {
|
|
margin-top: 0;
|
|
}
|