diff --git a/apps/readest-app/src/components/Alert.tsx b/apps/readest-app/src/components/Alert.tsx
index 69f3231e..1fbc3923 100644
--- a/apps/readest-app/src/components/Alert.tsx
+++ b/apps/readest-app/src/components/Alert.tsx
@@ -18,19 +18,25 @@ const Alert: React.FC<{
       <div
         ref={divRef}
         role='alert'
+        // Always stack the title/message block above the actions row. The
+        // previous side-by-side layout flex-wrapped at narrow widths and
+        // produced the cramped two-column-with-stacked-buttons shape from
+        // Image #3. Avoid the daisyUI `alert` class here — it applies a
+        // `display: grid` with `justify-items: center` that collapses the
+        // actions row to content width and pulls it toward the centre,
+        // defeating `justify-end`. We want a plain flex-column surface.
         className={clsx(
-          'alert flex items-center justify-between',
-          'bg-base-300 rounded-lg border-none p-4 shadow-2xl',
-          'w-full max-w-[90vw] sm:max-w-[70vw] md:max-w-[50vw] lg:max-w-[40vw] xl:max-w-[40vw]',
-          'min-w-[70vw] flex-col sm:min-w-[40vw] sm:flex-row',
+          'flex flex-col gap-3',
+          'bg-base-300 rounded-lg p-4 shadow-2xl',
+          'w-full max-w-md sm:max-w-lg md:max-w-xl',
         )}
       >
-        <div className='labels flex items-center space-x-2 self-start sm:space-x-4 sm:self-center'>
+        <div className='labels flex items-start gap-3'>
           <svg
             xmlns='http://www.w3.org/2000/svg'
             fill='none'
             viewBox='0 0 24 24'
-            className='stroke-info h-6 w-6 shrink-0'
+            className='stroke-info mt-0.5 h-6 w-6 shrink-0'
           >
             <path
               strokeLinecap='round'
@@ -39,12 +45,12 @@ const Alert: React.FC<{
               d='M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z'
             ></path>
           </svg>
-          <div className='flex flex-col gap-y-2'>
-            <h3 className='text-start text-sm font-medium sm:text-center'>{title}</h3>
-            <div className='text-start text-sm sm:text-center'>{message}</div>
+          <div className='flex min-w-0 flex-col gap-1'>
+            <h3 className='text-start text-sm font-medium'>{title}</h3>
+            <div className='text-start text-sm'>{message}</div>
           </div>
         </div>
-        <div className='buttons flex flex-wrap items-center justify-end gap-2 self-end sm:max-w-[20vw] sm:self-center'>
+        <div className='buttons flex items-center justify-end gap-2'>
           <button className='btn btn-sm btn-neutral' onClick={onCancel}>
             {_('Cancel')}
           </button>