HTML tag moving out of screen when clicking on Toggle

[Stunkell]

Describe the bug

Context

My application

I'm developping an application for big touch screen that need to always fit perfetcly in the screen without scroll bar (only lists of elements can be scrolled like in the screenshots).

Description

When clicking on a Toggle that was originaly not on the screen (in the overflow of the page and need to scroll to be seen) the entire HTML page move out of the screen.

Before clicking

After cliking one of the toggles

(The lower was the toggle the higher the page goes up)

I created a little project with the flowbite-svelte-starter project to reproduce the problem:
flowbite-svelte-starter_toggleBugReproduction.zip

Reproduction

• Download the reproduction project
• Install dependencies
• npm run dev
• Scroll down to the out of screen toggle
• Click on the toggle
• HTML element should be pushed to the top

Flowbite version and System Info

System:
    OS: Windows 11 10.0.22631
    CPU: (20) x64 13th Gen Intel(R) Core(TM) i7-13800H
    Memory: 10.99 GB / 31.66 GB
  Binaries:
    Node: 22.11.0 - C:\Program Files\nodejs\node.EXE
    npm: 10.5.1 - C:\Program Files\nodejs\npm.CMD
    pnpm: 9.0.6 - ~\AppData\Roaming\npm\pnpm.CMD
  Browsers:
    Edge: Chromium (127.0.2651.74)
    Internet Explorer: 11.0.22621.3527

[shinokada]

Does this happen with v1?
Without a concise code, it is hard to reproduce.

[Stunkell]

Hi @shinokada,
yes this happen with V1.
I gave you a project that reproduce the entire problem in the original post.
But if you want here you will find the code that is from the +page.svelte:

<script lang="ts">
    import { Toast, Toggle } from "flowbite-svelte";

    const messages = ["test", "test2"];
</script>

<div id="ToastArea">
    {#each messages as message}
        <Toast>
            {message}
        </Toast>
    {/each}
</div>

<h1>Welcome to SvelteKit</h1>
<p>
    Visit <a href="https://svelte.dev/docs/kit">svelte.dev/docs/kit</a> to read the
    documentation
</p>
<Toggle />

<style>
    #ToastArea {
        display: flex;
        flex-direction: column-reverse;
        justify-content: flex-start;
        align-items: flex-end;
        position: fixed;
        bottom: 10vh;
        top: 10vh;
        right: 0;
        z-index: 9999;
        padding: 1rem;
        width: 30rem;
        overflow-y: hidden;
        pointer-events: none;
    }
</style>