colorlink/afakzaid-rag
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

v1.8.36: revert DOM order to RTL-correct, cap dropdown at 50vw to prevent brand overlap

Browse Source
This commit is contained in:
colorlink
2026-05-28 23:17:09 +00:00
parent 3cacf637f1
commit 8be6c9735f
2 changed files with 14 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
postgres_data/pg_wal/000000010000000000000005
BIN
View File
Binary file not shown.
static/components.js
+12 -17
View File
@@ -41,17 +41,17 @@
<!-- Row 1: Identity + Account -->
<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-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>
<a href="/" class="flex items-center gap-3 min-w-0">
<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"/>
<span id="brand-icon" class="msym text-primary text-lg">auto_awesome</span>
</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>
<div id="nav-auth" class="flex items-center gap-2 shrink-0"></div>
</div>
<!-- Row 2: Page Nav (always visible) -->
@@ -210,19 +210,14 @@
e.stopPropagation();
const btn = document.getElementById('uh-btn');
const rect = btn.getBoundingClientRect();
// Button is on the LEFT side (RTL). Dropdown anchors to button's left edge
// but is capped at half the viewport so it never reaches brand name on the right.
drop.style.top = (rect.bottom + 6) + 'px';
if (window.innerWidth < 640) {
// Mobile: full width below header, no overlap possible
drop.style.left = '8px';
drop.style.right = '8px';
drop.style.width = 'auto';
} else {
// Desktop: align to button
drop.style.left = Math.max(8, rect.left) + 'px';
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.style.maxWidth = Math.floor(window.innerWidth * 0.5) + 'px';
drop.style.minWidth = '160px';
drop.style.width = 'auto';
drop.classList.toggle('hidden');
});