From 7618c40a777d723f783c8feda05ce43f959d475e Mon Sep 17 00:00:00 2001
From: Geert Rademakes <g26107@eon.com>
Date: Fri, 8 Aug 2025 09:49:02 +0200
Subject: [PATCH] fix(frontend): center loading spinner on large screens by
 using full-viewport container and removing #root max-width constraint

---
 packages/frontend/src/App.css | 3 ++-
 packages/frontend/src/App.tsx | 2 +-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/frontend/src/App.css b/packages/frontend/src/App.css
index 2abd334..be89341 100644
--- a/packages/frontend/src/App.css
+++ b/packages/frontend/src/App.css
@@ -12,8 +12,9 @@ html, body, #root {
   overflow: hidden;
 }
 
+/* Ensure full-viewport centering for loading state */
 #root {
-  max-width: 1280px;
+  max-width: none;
 }
 
 .logo {
diff --git a/packages/frontend/src/App.tsx b/packages/frontend/src/App.tsx
index 4d5c0e0..4f159c9 100644
--- a/packages/frontend/src/App.tsx
+++ b/packages/frontend/src/App.tsx
@@ -405,7 +405,7 @@ const RekordboxReader: React.FC = () => {
 
   if (xmlLoading) {
     return (
-      <Flex height="100vh" align="center" justify="center" direction="column" gap={4}>
+      <Flex height="100vh" width="100vw" align="center" justify="center" direction="column" gap={4}>
         <Spinner size="xl" />
         <Text>Loading your library...</Text>
       </Flex>