From d9fb0a137b8d9ba0739119471f70c5b516455039 Mon Sep 17 00:00:00 2001
From: Doxa Maps <maps@doxa.example>
Date: Tue, 29 Sep 2026 08:01:15 +0000
Subject: [PATCH] The phone notice holds its place above any profile, and pads
 the right side in Arabic

A larger-screens profile whose root is position:absolute; inset:0 would
lay out against ProfileLoader's wrapper and paint over the in-flow bar,
hiding the notice and its dismiss button. While the bar shows, the
profile's root is held in flow as the column's second item. No flagged
profile has that shape today; the next one will not need a special case.

The bar's padding is logical, so in Arabic the wider side stays on the
text rather than moving to the dismiss button.
---
 library/ProfileLoader.vue                 | 6 ++++++
 library/components/LargerScreenNotice.vue | 4 +++-
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/library/ProfileLoader.vue b/library/ProfileLoader.vue
index 34b2ee9ae..379d4bfd7 100644
--- a/library/ProfileLoader.vue
+++ b/library/ProfileLoader.vue
@@ -452,6 +452,12 @@ provide('dataStore', dataStore)
 .profile-loader.has-screen-notice > :not(.lsn-bar) {
   flex: 1 1 auto;
   min-height: 0;
+  /* A profile whose ROOT is position:absolute; inset:0 would be laid out against this wrapper and paint
+     over the bar, hiding the notice and its ×. While the bar shows, the root is held in flow as the
+     column's second item; its own absolute children still anchor on it. No flagged profile has that
+     shape today; this keeps the next one from needing a special case. */
+  position: relative !important;
+  inset: auto !important;
 }
 
 .profile-error {
diff --git a/library/components/LargerScreenNotice.vue b/library/components/LargerScreenNotice.vue
index 8db80e1b0..b61e3e55c 100644
--- a/library/components/LargerScreenNotice.vue
+++ b/library/components/LargerScreenNotice.vue
@@ -55,7 +55,9 @@ const blockParts = computed(() => T('messages.desktopOnlyNotice',
   gap: 8px;
   flex: none;
   margin: 0;
-  padding: 8px 8px 8px 12px;
+  /* Logical, so in Arabic the wider side stays on the text and the narrow one on the ×. */
+  padding-block: 8px;
+  padding-inline: 12px 8px;
   background: #fff8e1;
   border-block-end: 1px solid #f0d68a;
   color: #4a3b00;