Skip to content

Conversation

silverwind
Copy link
Member

@silverwind silverwind commented Sep 10, 2025

Dropdown text is empty when rendering initially which causes the element to resize vertically when the text is set later via JS. Here seen on the global PR list:

Fix this by using a non-breaking space so the element will not resize when it receives the text.

@GiteaBot GiteaBot added the lgtm/need 2 This PR needs two approvals by maintainers to be considered for merging. label Sep 10, 2025
@github-actions github-actions bot added the modifies/templates This PR modifies the template files label Sep 10, 2025
@silverwind
Copy link
Member Author

silverwind commented Sep 10, 2025

There are more cases in the codebase where empty text is set:

templates/repo/home_sidebar_top.tmpl:38:									<div class="text"></div>
templates/repo/issue/sidebar/issue_management.tmpl:59:							<div class="text"></div> {{svg "octicon-triangle-down" 14 "dropdown icon"}}
templates/shared/search/combo.tmpl:13:		<div class="text"></div> {{svg "octicon-triangle-down" 14 "dropdown icon"}}
templates/user/settings/notifications.tmpl:16:								<div class="text"></div>
templates/user/settings/notifications.tmpl:47:								<div class="text"></div>
web_src/fomantic/build/components/dropdown.js:4163:      html += '<div class="text"></div>';
web_src/js/modules/fomantic/aria.md:111:  <div class="text"></div>

I wonder if a CSS-based solution is possible which would fix all of them, not just this search box. Adding min-height: 16px does work but it may not be accurate depending on font.

@silverwind silverwind marked this pull request as draft September 10, 2025 00:51
@github-actions github-actions bot added modifies/frontend and removed modifies/templates This PR modifies the template files labels Sep 10, 2025
@silverwind
Copy link
Member Author

silverwind commented Sep 10, 2025

Changed to min-height. Font size is 13px, I don't expect this to take up more than 16px even with other fonts. Currently the 13px renders as 15.8333px:

image

@silverwind silverwind changed the title Avoid page layout shift because of dropdown text Avoid dropdown resizing because of text Sep 10, 2025
@wxiaoguang
Copy link
Contributor

I don't think the patch is ideal.

Such hacky patches will just cause more problems: for example: it breaks the "small dropdown" layout.

@silverwind
Copy link
Member Author

silverwind commented Sep 10, 2025

Ultimately the issue stems from the fact that dropdown height is determined based on the text, and text height is variable with font size and whether text is present or not.

I think we may be able to find a better solution that sizes height independent on text, but it will likely limit dropdown text to single-line content (which I think is no issue).

@silverwind
Copy link
Member Author

I guess a devtest page is needed to render dropdowns of various sizes to ensure they all render correctly. I guess with a proper min-height on the root element, something clean might be possible.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
lgtm/need 2 This PR needs two approvals by maintainers to be considered for merging. modifies/frontend
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants