fix: update styles and structure for header, navbar, and main layout; improve notification display and sidebar functionality

Author: slmgkck

src/lib/component/Header.svelte

@@ -3,18 +3,26 @@
 </svelte:head>
 
 <!-- Header -->
-<div class="{themeSettings.headerWidthOption === 'FULL_SIZE' ? 'container-fluid' : 'container'} position-relative"
-     class:bg-white={!themeSettings.headerBgColor}
-     id="header" style="{themeSettings.headerHeight ? `height: ${themeSettings.headerHeight}px;` : ''}">
+<div
+  class="rounded {themeSettings.headerWidthOption === 'FULL_SIZE'
+    ? 'container-fluid'
+    : 'container'} position-relative"
+  class:bg-white={!themeSettings.headerBgColor}
+  id="header"
+  style="height: {themeSettings.headerHeight || '256'}px;">
   <img
     alt={$_("components.header.alt")}
-    class="{(themeSettings.logoHeight || themeSettings.logoWidth) ? '' : 'img-fluid'} p-3 position-absolute {logoPositionClasses}"
-    class:d-none="{themeSettings.logoVisibility === false}"
-    height="{themeSettings.logoHeight || 'auto'}"
+    class="{themeSettings.logoHeight || themeSettings.logoWidth
+      ? ''
+      : 'img-fluid'} p-3 position-absolute {logoPositionClasses}"
+    class:d-none={themeSettings.logoVisibility === false}
+    height={themeSettings.logoHeight || "auto"}
     src="/api/websiteLogo?hash={$session.siteInfo.websiteLogoHash}"
-    style="{!themeSettings.logoHeight && !themeSettings.logoWidth ? 'height: 100%; width: 100%; object-fit: contain;' : ''} "
+    style="{!themeSettings.logoHeight && !themeSettings.logoWidth
+      ? 'height: 100%; width: 100%; object-fit: contain;'
+      : ''} "
     title={$session.siteInfo.websiteName}
-    width="{themeSettings.logoWidth || 'auto'}" />
+    width={themeSettings.logoWidth || "auto"} />
 </div>
 
 <!-- Header End -->
@@ -26,7 +34,9 @@
   const session = getContext("session");
   const themeSettings = getContext("themeSettings");
 
-  $: logoPosition = themeSettings.logoPosition ? themeSettings.logoPosition : "CENTER";
+  $: logoPosition = themeSettings.logoPosition
+    ? themeSettings.logoPosition
+    : "CENTER";
   $: logoPositionClasses = getLogoPositionClasses(logoPosition);
 
   function getLogoPositionClasses(logoPosition) {

src/lib/component/Main.svelte

@@ -1,6 +1,6 @@
 <!-- Main Container -->
 <main class="container">
-  <div class="row">
+  <div class="row g-3">
     {#if sidebarEnabled && sidebarPosition === 'LEFT'}
       <svelte:component this="{$sidebar}"
                         {...{ ...$sidebarProps, side: sidebarPosition === 'LEFT' ? 'left' : 'right' }} />