robin/Dramlog-Prod
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: Improve active session visibility and fix mobile timeline layout

Browse Source
This commit is contained in:
robin
2025-12-19 21:01:48 +01:00
parent 0474a83dfb
commit 822dc18bfc
4 changed files with 68 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/ActiveSessionBanner.tsx
View File

@@ -19,14 +19,20 @@ export default function ActiveSessionBanner() {
href={`/sessions/${activeSession.id}`}
className="flex items-center gap-3 flex-1 min-w-0"
>
<div className="bg-white/20 p-1.5 rounded-lg shrink-0">
<Sparkles size={16} className="text-white animate-pulse" />
<div className="relative shrink-0">
<div className="bg-white/20 p-1.5 rounded-lg">
<Sparkles size={16} className="text-white animate-pulse" />
</div>
<div className="absolute -top-1 -right-1 w-2.5 h-2.5 bg-red-500 rounded-full border-2 border-amber-600 animate-ping" />
</div>
<div className="min-w-0">
<p className="text-[10px] font-black uppercase tracking-wider opacity-90 leading-none mb-1">{t('session.activeSession')}</p>
<div className="flex items-center gap-2 mb-0.5">
<span className="text-[9px] font-black uppercase tracking-widest bg-white/20 px-1.5 py-0.5 rounded leading-none text-white whitespace-nowrap">Live Jetzt</span>
<p className="text-[10px] font-black uppercase tracking-wider opacity-90 leading-none truncate">{t('session.activeSession')}</p>
</div>
<p className="text-sm font-bold truncate leading-none">{activeSession.name}</p>
</div>
<ArrowRight size={14} className="opacity-50 ml-2" />
<ArrowRight size={14} className="opacity-50 ml-1 shrink-0" />
</Link>
<button