The appshell header doesn't occupy the entire width.

[imjishnu001]

Hi Team,

I have been struggling to get the Appshell header and body content to cover the complete width of the screen.

I have update the global css and app.html as suggested in the docs

html, body { @apply h-full overflow-hidden; }

`<bodydata-sveltekit-preload-data="hover" data-theme="skeleton">

%sveltekit.body%

`

however this only covers the height, I tried manually changing the width but it only works in "px". I believe I am missing something really basic, any suggestions on how to fix the issue?

Thanks in advance!

[Sarenor]

Can you share your repository? It might be that you have a margin applied around the AppShell. The Skeleton Docs themselves are build with the AppShell and it covers the full width there

[imjishnu001]

Thank you for the prompt response.

I haven't pushed the project yet.
below is the code for the global and main layout pages if it helps.

`<script lang='ts'>
// The ordering of these imports is critical to your app working properly
//import '../theme.postcss';
import '@skeletonlabs/skeleton/themes/theme-skeleton.css';
// If you have source.organizeImports set to true in VSCode, then it will auto change this ordering
import '@skeletonlabs/skeleton/styles/skeleton.css';
// Most of your app wide CSS should be put in this file
import '../app.postcss';
import { Toast } from '@skeletonlabs/skeleton';

</script>

<div class="container h-full">
	<slot />
</div>

`

`<script lang='ts'>

import { Avatar, AppBar, AppShell, Drawer, drawerStore, Toast, Modal } from '@skeletonlabs/skeleton';
import Navigation from '$lib/components/Navigation.svelte';
import { LightSwitch } from '@skeletonlabs/skeleton';


function drawerOpen(): void{
	drawerStore.open()
}

</script> ProjectDDP

		</svelte:fragment>
		<svelte:fragment slot="trail">
				<LightSwitch />
		</svelte:fragment>
	</AppBar>
</svelte:fragment>
<svelte:fragment slot="sidebarLeft">
	<Navigation />
</svelte:fragment>
<!--<svelte:fragment slot="sidebarRight">Sidebar Right</svelte:fragment>
<svelte:fragment slot="pageHeader">Page Header</svelte:fragment> -->
<!-- Router Slot -->
<div class="container p-10 w-full h-full">
	<slot />
</div>
<!-- ---- / 
<svelte:fragment slot="pageFooter">Page Footer</svelte:fragment>
<svelte:fragment slot="footer">Footer</svelte:fragment>---- -->

`

[Sarenor]

Why the separation in global and main layout?
If the AppShell resides in main and the container h-full is the global one, that's probably where the extra margin comes from.

[endigo9740]

@imjishnu001 assuming this isn't a typo, there is a missing space here between the words body and data:

<bodydata-sveltekit-preload-data="hover" data-theme="skeleton">

I'd start there, but otherwise I'd recommend right clicking and inspecting your markup in your browser and try to find where the space is coming from. We've not seen this for other projects, so it's something on your end.

If you can provide a minimal repro we can take a look as well

[imjishnu001]

Thank you,
That was indeed a typo in the body tag. I am working on getting the code pushed to Git Hub, just need to make a few changes.

Below are screenshots from the developer console. I haven't added any custom CSS.

[imjishnu001]

The issue stems from an unfortunate design choice I made.

Appshell consumes full width when it is in the global layouts page, whereas I have added it to layout of a route, possibly this is causing issue.

[Sarenor]

That is probably the case, yeah.