diff --git a/frontend/src/App.test.ts b/frontend/src/App.test.ts
index 2605314e..6ab72799 100644
--- a/frontend/src/App.test.ts
+++ b/frontend/src/App.test.ts
@@ -1,4 +1,5 @@
 import { describe, it, expect, vi } from 'vitest';
+import { readFileSync } from 'node:fs';
 import { nextTick } from 'vue';
 import { mount } from '@vue/test-utils';
 import { createPinia } from 'pinia';
@@ -15,6 +16,14 @@ const createStub = (name: string) => ({
 });
 
 describe('App', () => {
+  it('keeps long toast messages inside narrow viewports', () => {
+    const toast = readFileSync('src/components/common/Toast.vue', 'utf8');
+    expect(toast).toContain('calc(100vw-2rem)');
+    expect(toast).toContain('overflow-wrap: anywhere');
+    expect(toast).toContain('min-w-0 flex-1');
+    expect(toast).toContain('shrink-0');
+  });
+
   it('renders and reacts to interface typography settings', async () => {
     setSettingsFromRawData({});
     const pinia = createPinia();
diff --git a/frontend/src/components/common/Toast.vue b/frontend/src/components/common/Toast.vue
index b0f32238..6b7d3716 100644
--- a/frontend/src/components/common/Toast.vue
+++ b/frontend/src/components/common/Toast.vue
@@ -38,13 +38,16 @@ function handleClose() {
 
 <template>
   <div v-if="show" :class="['toast', `toast-${type}`, show ? 'toast-show' : 'toast-hide']">
-    <div class="flex items-center gap-3">
-      <PhCheckCircle v-if="type === 'success'" :size="20" />
-      <PhXCircle v-else-if="type === 'error'" :size="20" />
-      <PhWarning v-else-if="type === 'warning'" :size="20" />
-      <PhInfo v-else :size="20" />
-      <span class="flex-1 toast-message selectable-text">{{ message }}</span>
-      <button class="text-xl opacity-70 hover:opacity-100 transition-opacity" @click="handleClose">
+    <div class="flex min-w-0 items-center gap-3">
+      <PhCheckCircle v-if="type === 'success'" :size="20" class="shrink-0" />
+      <PhXCircle v-else-if="type === 'error'" :size="20" class="shrink-0" />
+      <PhWarning v-else-if="type === 'warning'" :size="20" class="shrink-0" />
+      <PhInfo v-else :size="20" class="shrink-0" />
+      <span class="min-w-0 flex-1 toast-message selectable-text">{{ message }}</span>
+      <button
+        class="shrink-0 text-xl opacity-70 hover:opacity-100 transition-opacity"
+        @click="handleClose"
+      >
         <PhX :size="20" />
       </button>
     </div>
@@ -54,7 +57,7 @@ function handleClose() {
 <style scoped>
 @reference "../../style.css";
 .toast {
-  @apply z-[60] px-5 py-3 rounded-lg shadow-lg border min-w-[300px] max-w-md;
+  @apply z-[60] px-5 py-3 rounded-lg shadow-lg border w-[min(28rem,calc(100vw-2rem))] max-w-md;
 }
 .toast-show {
   animation: slideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
@@ -92,6 +95,8 @@ function handleClose() {
   -moz-user-select: text;
   -ms-user-select: text;
   cursor: text;
+  overflow-wrap: anywhere;
+  word-break: break-word;
 }
 @keyframes slideIn {
   from {