Svelte Static Adapter breaks CSS layout by changing hirarchy in browser

[uvulpos]

What package has an issue

@svelteuidev/core

A clear and concise description of what the bug is

I use a svelte multi adapter adapter to be able to compile my frontend into a node app and static pwa. But when I build a static pwa my layout breaks and bugs occur.

Screen_Recording_2024-07-11_at_06.43.37.mov

In this video, I already have fixed the broken layout by using !important, but I don't think this should be necessary. I don't know if this is an urgent bug or even a supported way of using svelteui, but its (I think) important to know

In which browser(s) did the problem occur?

Firefox, Chrome

Steps To Reproduce

<script lang="ts">
  // svelte config
  // export const prerender = true;
  // export const ssr = true;
  // export const trailingSlash = "always";

  // import code
  import { onMount } from "svelte";
  import { _ } from "svelte-i18n";
  import { addMessages, init } from "svelte-i18n";
  import {
    AppShell,
    Navbar,
    Header,
    SvelteUIProvider,
  } from "@svelteuidev/core";
  import { allowedLanguages, getLocale } from "$lib/i18n";
  import { Header as PageHeader } from "$lib/components/Header";
  import { DarkNavbar } from "./style";

  // install fonts
  import "$lib/theme/index.sass";
  import "@fontsource/inter";

  // import i18n files
  import en from "$lib/i18n/en.json";
  import de from "$lib/i18n/de.json";
  import { logo } from "$lib/assets";
  import { Sidebar } from "$lib/components/Sidebar";

  // configure i18n
  addMessages("en", en);
  addMessages("de", de);
  init({
    fallbackLocale: "en",
    initialLocale: getLocale(allowedLanguages),
  });

  let collapseSidebar = true;
  let preMount: boolean = true;

  onMount(() => {
    preMount = false;
  });
</script>

<SvelteUIProvider withNormalizeCSS withGlobalStyles>
  {#if !preMount}
    <AppShell>
      <Navbar
        slot="navbar"
        fixed
        class="sidebar {!collapseSidebar
          ? 'sidebar-expandSidebar'
          : 'collapsedSidebar'}"
      >
        <Sidebar />
      </Navbar>
      <Header slot="header" fixed override={DarkNavbar} height={67}>
        <PageHeader {logo} bind:collapseSidebar />
      </Header>
      <div class="subpage-content" class:expandSidebar={collapseSidebar}>
        <slot />
      </div>
    </AppShell>
  {/if}
</SvelteUIProvider>

<style lang="sass">
  @import "$lib/theme/variables.scss"
  
  body
      background: var(--background-color)
      color: var(--font-color)

  :global(.sidebar)
      overflow-y: scroll
      padding: 1rem 1rem 2rem
      z-index: 100
      position: fixed
      inset: 0 !important
      width: 0px
      display: none
      height: calc(100vh - var(--topbar-height)) !important
      margin-top: var(--topbar-height) !important

      color: var(--sidebar-font-color) !important
      background-color: var(--sidebar-background-color) !important

      box-sizing: border-box
      font-size: 0.9em

  :global(.sidebar-expandSidebar)
      display: flex !important
      width: var(--sidebar-width)

  @media (min-width: 1024px)
    :global(.sidebar)
        display: block
        width: var(--sidebar-width) !important
    :global(.sidebar-expandSidebar)
        display: flex !important
        width: var(--sidebar-width) !important
</style>

Do you know how to fix the issue

No

Are you willing to participate in fixing this issue and create a pull request with the fix

No

Relevant Assets

No response

[kamellperry]

Will be taking a look into this, thank you for bringing it to our attention!