v1.8.36: revert DOM order to RTL-correct, cap dropdown at 50vw to prevent brand overlap
This commit is contained in:
Binary file not shown.
+14
-19
@@ -41,17 +41,17 @@
|
|||||||
|
|
||||||
<!-- Row 1: Identity + Account -->
|
<!-- Row 1: Identity + Account -->
|
||||||
<div class="flex items-center justify-between py-3 gap-3">
|
<div class="flex items-center justify-between py-3 gap-3">
|
||||||
<div id="nav-auth" class="flex items-center gap-2 shrink-0"></div>
|
<a href="/" class="flex items-center gap-3 min-w-0">
|
||||||
<a href="/" class="flex items-center gap-2 min-w-0">
|
|
||||||
<div class="min-w-0 text-right">
|
|
||||||
<h1 class="text-sm font-bold text-primary leading-tight" id="brand-name">AfakZaid RAG</h1>
|
|
||||||
<p class="text-[10px] text-on-surface-variant/60 uppercase tracking-widest" id="brand-sub">Scholarly Intelligence</p>
|
|
||||||
</div>
|
|
||||||
<div class="w-9 h-9 bg-primary/15 rounded-xl flex items-center justify-center shrink-0 glow-sm brand-icon-wrap">
|
<div class="w-9 h-9 bg-primary/15 rounded-xl flex items-center justify-center shrink-0 glow-sm brand-icon-wrap">
|
||||||
<img id="brand-logo" class="hidden rounded-lg object-contain" style="height:32px"/>
|
<img id="brand-logo" class="hidden rounded-lg object-contain" style="height:32px"/>
|
||||||
<span id="brand-icon" class="msym text-primary text-lg">auto_awesome</span>
|
<span id="brand-icon" class="msym text-primary text-lg">auto_awesome</span>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="min-w-0">
|
||||||
|
<h1 class="text-sm font-bold text-primary leading-tight" id="brand-name">AfakZaid RAG</h1>
|
||||||
|
<p class="text-[10px] text-on-surface-variant/60 uppercase tracking-widest" id="brand-sub">Scholarly Intelligence</p>
|
||||||
|
</div>
|
||||||
</a>
|
</a>
|
||||||
|
<div id="nav-auth" class="flex items-center gap-2 shrink-0"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Row 2: Page Nav (always visible) -->
|
<!-- Row 2: Page Nav (always visible) -->
|
||||||
@@ -210,19 +210,14 @@
|
|||||||
e.stopPropagation();
|
e.stopPropagation();
|
||||||
const btn = document.getElementById('uh-btn');
|
const btn = document.getElementById('uh-btn');
|
||||||
const rect = btn.getBoundingClientRect();
|
const rect = btn.getBoundingClientRect();
|
||||||
drop.style.top = (rect.bottom + 6) + 'px';
|
// Button is on the LEFT side (RTL). Dropdown anchors to button's left edge
|
||||||
if (window.innerWidth < 640) {
|
// but is capped at half the viewport so it never reaches brand name on the right.
|
||||||
// Mobile: full width below header, no overlap possible
|
drop.style.top = (rect.bottom + 6) + 'px';
|
||||||
drop.style.left = '8px';
|
drop.style.left = Math.max(8, rect.left) + 'px';
|
||||||
drop.style.right = '8px';
|
drop.style.right = 'auto';
|
||||||
drop.style.width = 'auto';
|
drop.style.maxWidth = Math.floor(window.innerWidth * 0.5) + 'px';
|
||||||
} else {
|
drop.style.minWidth = '160px';
|
||||||
// Desktop: align to button
|
drop.style.width = 'auto';
|
||||||
drop.style.right = 'auto';
|
|
||||||
drop.style.width = '11rem';
|
|
||||||
const left = Math.max(8, Math.min(rect.left, window.innerWidth - 184));
|
|
||||||
drop.style.left = left + 'px';
|
|
||||||
}
|
|
||||||
drop.classList.toggle('hidden');
|
drop.classList.toggle('hidden');
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user