fix: keep the select toolbar on one line at any width

The select-all label, dropdown, and counter never shrink or wrap; the
hint collapses first, then the loading indicator truncates. A fixed
dropdown width with chevron padding stops verbose placeholders from
overflowing, and the toolbar gap keeps a minimum spacing once the
ml-auto margin collapses
This commit is contained in:
Pionxzh
2026-08-20 17:44:24 +08:00
committed by Pionxzh
parent 43fb9f741e
commit cc04675365
3 changed files with 27 additions and 6 deletions
+4
View File
@@ -94,6 +94,10 @@
flex-shrink: 0;
}
.min-w-0 {
min-width: 0;
}
.space-y-6>:not([hidden])~:not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
+9
View File
@@ -205,6 +205,9 @@
.SelectToolbar {
display: flex;
align-items: center;
/* Minimum breathing room between the select-all label and the right
group once the ml-auto margin collapses under pressure */
gap: 12px;
padding: 12px 16px;
border-radius: 0;
border: 1px solid #6f6e77;
@@ -212,6 +215,12 @@
flex-shrink: 0;
}
/* CJK labels wrap per-character when the row is squeezed — never shrink it */
.SelectToolbar .CheckBoxLabel {
white-space: nowrap;
flex-shrink: 0;
}
.ProjectSelect .Select {
width: auto;
}
+14 -6
View File
@@ -221,16 +221,22 @@ const ConversationSelect: FC<ConversationSelectProps> = ({
setSelected(checked ? filtered : [])
}}
/>
<div className="flex items-center gap-2 ml-auto flex-wrap">
{/* min-w-0 lets the shrinkable items (hint first, then the loading
indicator) truncate instead of the whole row wrapping */}
<div className="flex items-center gap-2 ml-auto min-w-0">
{loading && conversations.length > 0 && (
<span className="flex items-center gap-1 text-sm text-gray-500 dark:text-gray-400">
<span className="flex items-center gap-1 truncate min-w-0 text-sm text-gray-500 dark:text-gray-400">
<IconLoading className="w-3 h-3" />
{t('Loading')}... ({conversations.length})
</span>
)}
<select
className="Select"
style={{ fontSize: '0.75rem', padding: '2px 5px' }}
className="Select shrink-0"
// Fixed width: only the placeholder is ever shown collapsed, and
// without it the control sizes itself to the longest option,
// which overflows the toolbar in verbose locales. The 2rem right
// padding keeps the placeholder off the dropdown chevron.
style={{ fontSize: '0.75rem', padding: '2px 2rem 2px 0.5rem', width: '8.5rem', textOverflow: 'ellipsis' }}
disabled={disabled || filtered.length === 0}
value=""
title="Select conversations by export status"
@@ -244,10 +250,12 @@ const ConversationSelect: FC<ConversationSelectProps> = ({
<option value="not_exported">{t('Select Not Exported')}</option>
<option value="updated">{t('Select Updated')}</option>
</select>
<span className="text-xs text-gray-400 dark:text-gray-500">
{/* Highest shrink factor: the hint collapses before the
loading indicator starts truncating */}
<span className="truncate min-w-0 text-xs text-gray-400 dark:text-gray-500" style={{ flexShrink: 99 }}>
{t('Shift Select Hint')}
</span>
<span className="text-sm font-medium tabular-nums text-gray-500 dark:text-gray-400">
<span className="whitespace-nowrap shrink-0 text-sm font-medium tabular-nums text-gray-500 dark:text-gray-400">
{selected.length} / {filtered.length}
</span>
</div>