Skip to content

Commit 5322175

Browse files
JeanballJeanball
committed
fix: Improve text wrapping and layout for format details within buttons and modal content, and refactor modal styling.
1 parent 48fd29f commit 5322175

File tree

4 files changed

+17
-24
lines changed

4 files changed

+17
-24
lines changed

‎frontend/src/components/Modal/AddAlbumVersionModal.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -58,11 +58,11 @@ const AlbumDetailModal: React.FC<AlbumDetailModalProps> = ({ album, onClose, onC
5858
<button
5959
key={index}
6060
onClick={() => setSelectedFormat(format)}
61-
className={`btn btn-block h-auto py-2 ${selectedFormat === format ? 'btn-primary' : 'btn-outline'}`}
61+
className={`btn btn-block h-auto py-2 max-w-full overflow-hidden ${selectedFormat === format ? 'btn-primary' : 'btn-outline'}`}
6262
>
63-
<div className="text-left w-full">
64-
<div className="font-bold text-lg">{format.name} <span className="text-accent">{format.text}</span></div>
65-
<div className="text-xs font-normal opacity-70 normal-case">
63+
<div className="text-left w-full break-words whitespace-normal">
64+
<div className="font-bold text-lg leading-tight">{format.name} <span className="text-accent break-words">{format.text}</span></div>
65+
<div className="text-xs font-normal opacity-70 normal-case mt-1 break-words">
6666
{format.descriptions.join(', ')}
6767
</div>
6868
</div>

‎frontend/src/components/Modal/ConfirmAddModal.tsx‎

Lines changed: 4 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -27,14 +27,7 @@ const ConfirmAddModal: React.FC<ConfirmAddModalProps> = ({
2727
return (
2828
<dialog className="modal modal-open">
2929
{/* Transparent glassmorphism backdrop */}
30-
<div
31-
className="modal-box border border-base-content/10"
32-
style={{
33-
background: 'color-mix(in srgb, oklch(var(--b2)) 40%, transparent)',
34-
backdropFilter: 'blur(8px)',
35-
WebkitBackdropFilter: 'blur(8px)',
36-
}}
37-
>
30+
<div className="modal-box w-11/12 max-w-lg">
3831
<div className="flex gap-4 items-start">
3932
{/* Album cover */}
4033
{coverImage && (
@@ -51,12 +44,12 @@ const ConfirmAddModal: React.FC<ConfirmAddModalProps> = ({
5144
<p className="text-sm text-base-content/60 mt-0.5 truncate">{albumTitle}</p>
5245
)}
5346
<div className="mt-2">
54-
<p className="text-base-content/80">
47+
<p className="text-base-content/80 break-words whitespace-normal">
5548
<span className="font-semibold">{format.name}</span>
5649
{format.text && <span className="ml-1 text-accent">{format.text}</span>}
5750
</p>
5851
{format.descriptions?.length > 0 && (
59-
<p className="text-sm text-base-content/50 mt-0.5">
52+
<p className="text-sm text-base-content/50 mt-0.5 break-words whitespace-normal">
6053
{format.descriptions.join(', ')}
6154
</p>
6255
)}
@@ -73,7 +66,7 @@ const ConfirmAddModal: React.FC<ConfirmAddModalProps> = ({
7366
</button>
7467
</div>
7568
</div>
76-
<form method="dialog" className="modal-backdrop" style={{ background: 'rgba(0, 0, 0, 0.15)' }}>
69+
<form method="dialog" className="modal-backdrop">
7770
<button onClick={onCancel}>{t('common.close')}</button>
7871
</form>
7972
</dialog>

‎frontend/src/pages/MasterPage.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -360,17 +360,17 @@ const MasterPage: React.FC = () => {
360360
{formats.map((format, index) => (
361361
<button
362362
key={index}
363-
className="btn btn-sm btn-outline h-auto py-1.5 normal-case"
363+
className="btn btn-sm btn-outline h-auto py-1.5 normal-case max-w-full"
364364
onClick={() => details && handleFormatClick(details, format)}
365365
disabled={isSubmitting}
366366
title={t('versions.clickToAdd')}
367367
style={getFormatButtonStyle(format.text, format.descriptions)}
368368
>
369-
<div className="text-left">
369+
<div className="text-left w-full break-words whitespace-normal overflow-hidden">
370370
<span className="font-semibold">{format.name}</span>
371-
{format.text && <span className="ml-1">{format.text}</span>}
371+
{format.text && <span className="ml-1 break-words">{format.text}</span>}
372372
{format.descriptions?.length > 0 && (
373-
<span className="block text-xs opacity-70">
373+
<span className="block text-xs opacity-70 break-words">
374374
{format.descriptions.join(', ')}
375375
</span>
376376
)}

‎frontend/src/pages/ReleasePage.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -178,18 +178,18 @@ const ReleasePage: React.FC = () => {
178178
{formats.map((format, index) => (
179179
<button
180180
key={index}
181-
className="btn btn-outline h-auto py-3 normal-case justify-start"
181+
className="btn btn-outline h-auto py-3 normal-case justify-start max-w-full"
182182
onClick={() => handleFormatClick(format)}
183183
disabled={isSubmitting}
184184
style={getFormatButtonStyle(format.text, format.descriptions)}
185185
>
186-
<div className="text-left">
187-
<div className="font-bold text-lg">
186+
<div className="text-left w-full break-words whitespace-normal overflow-hidden">
187+
<div className="font-bold text-lg leading-tight">
188188
{format.name}
189-
{format.text && <span className="ml-2">{format.text}</span>}
189+
{format.text && <span className="ml-2 break-words">{format.text}</span>}
190190
</div>
191191
{format.descriptions?.length > 0 && (
192-
<div className="text-xs font-normal opacity-70">
192+
<div className="text-xs font-normal opacity-70 mt-1 break-words">
193193
{format.descriptions.join(', ')}
194194
</div>
195195
)}

0 commit comments

Comments
 (0)