diff --git a/app/game-frontend/src/views/MainView.vue b/app/game-frontend/src/views/MainView.vue
index 84602cf..db7960f 100644
--- a/app/game-frontend/src/views/MainView.vue
+++ b/app/game-frontend/src/views/MainView.vue
@@ -414,7 +414,8 @@ button {
 }
 
 .mobile-message-panel {
-    width: calc(100% + 48px);
+    width: 100vw;
+    min-width: 0;
     margin-left: -24px;
 }
 
diff --git a/tools/frontend-legacy-parity/instant-diplomacy-message.spec.ts b/tools/frontend-legacy-parity/instant-diplomacy-message.spec.ts
index dc526bf..d4b5558 100644
--- a/tools/frontend-legacy-parity/instant-diplomacy-message.spec.ts
+++ b/tools/frontend-legacy-parity/instant-diplomacy-message.spec.ts
@@ -204,7 +204,7 @@ test.describe('instant diplomacy response UI', () => {
             borderWidth: '1px',
             cursor: 'pointer',
         });
-        expect(geometry.buttons.every((button) => button.height >= 20 && button.height <= 22)).toBe(true);
+        expect(geometry.buttons.every((button) => button.height >= 22 && button.height <= 26)).toBe(true);
 
         await decline.hover();
         expect(await decline.evaluate((element) => getComputedStyle(element).cursor)).toBe('pointer');