xinyin025/LangBot
1
0
Fork 0
mirror of https://github.com/langbot-app/LangBot.git synced 2026-08-10 21:10:59 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(web): provider card overflow on mobile via grid/flex min-width floor

Browse Source 
The previous truncate/shrink-0 pass only touched leaf nodes, but the
min-content floor was set by two ancestors: the flex-1 left group lacked
min-w-0, and CardHeader is a CSS grid whose implicit single column
defaults to min-content. Constrain both (min-w-0 on the header grid +
explicit grid-cols-[minmax(0,1fr)], min-w-0 on the inner flex groups) so
the provider name / base_url+key subtitle actually truncate instead of
forcing the card — and the whole settings modal — wider than the viewport.
This commit is contained in:
RockChinQ
2026-06-21 12:54:24 -04:00
parent 876e8bf804
commit cbe17cde6c
1 changed files with 3 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/app/home/components/models-dialog/components/ProviderCard.tsx
+3 -3
View File
@@ -150,9 +150,9 @@ export default function ProviderCard({
return ( return (
<Card className="mb-2"> <Card className="mb-2">
<Collapsible open={isExpanded} onOpenChange={onToggle}> <Collapsible open={isExpanded} onOpenChange={onToggle}>
<CardHeader className="py-0 px-4"> <CardHeader className="py-0 px-4 min-w-0 [&]:grid-cols-[minmax(0,1fr)]">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between gap-2 min-w-0">
<div className="flex items-center gap-2 flex-1"> <div className="flex items-center gap-2 flex-1 min-w-0">
{isLangBotModels ? ( {isLangBotModels ? (
<div className="w-9 h-9 rounded-lg overflow-hidden flex-shrink-0"> <div className="w-9 h-9 rounded-lg overflow-hidden flex-shrink-0">
<img <img