opensource/galaxy
3
0
Fork 0
mirror of https://github.com/galaxyproject/galaxy.git synced 2026-10-24 23:49:37 +08:00
Code Issues Packages Projects Releases Wiki Activity

Ensure card titles get at least 50% width

Browse Source 
Add responsive layout to GCard header that prevents badges from
squashing the title. Title section now has min-width of 50% and
badges wrap to next line when needed.
This commit is contained in:
Dannon Baker
2026-05-02 11:25:52 +02:00
committed by mvdbeek
parent f07c9469eb
commit 2921182a3b
1 changed files with 7 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/components/Common/GCard.vue
+7 -3
View File
@@ -323,8 +323,8 @@ function onKeyDown(event: KeyboardEvent) {
<div class="d-flex flex-column flex-gapy-1">
<div
:id="`g-card-${props.id}-header`"
class="d-flex flex-gapy-1 flex-gapx-1 justify-content-between">
<div class="d-flex flex-column">
class="d-flex flex-wrap flex-gapy-1 flex-gapx-1 justify-content-between">
<div class="d-flex flex-column flex-grow-1 g-card-title-section">
<div class="d-flex">
<div v-if="selectable">
<slot name="select">
@@ -416,7 +416,7 @@ function onKeyDown(event: KeyboardEvent) {
</div>
</div>
<div class="align-items-start d-flex flex-row-reverse flex-wrap gap-1">
<div class="align-items-start d-flex flex-row-reverse flex-wrap gap-1 flex-shrink-0">
<div>
<slot v-if="props.showBookmark" name="bookmark">
<BButton
@@ -733,6 +733,10 @@ function onKeyDown(event: KeyboardEvent) {
}
}
.g-card-title-section {
min-width: 50%;
}
.g-card-rename {
visibility: hidden;
}