Update to not use global css

src/lib/layout/cover.svelte

@@ -2,13 +2,14 @@
     import { Layout } from '@appwrite.io/pink-svelte';
 
     export let size: 'small' | 'medium' | 'large' | 'xl' = null;
+    export let autoSize = false;
 
     $: style = size
         ? `--p-container-max-size: var(--container-max-size, var(--container-size-${size}))`
         : '';
 </script>
 
-<div class="top-cover-console">
+<div class="top-cover-console" class:autoSize>
     <div class="cover-container" {style}>
         <Layout.Stack direction="row" alignItems="center">
             <slot name="header" />
@@ -28,6 +29,9 @@
         margin-left: -190px;
         padding-left: 190px;
     }
+    .autoSize {
+        block-size: auto;
+    }
     .cover-container {
         position: relative;
         margin: 0 1rem;

src/routes/(console)/project-[project]/overview/header.svelte

@@ -21,7 +21,7 @@
         </svelte:fragment>
     </Cover>
 {:else}
-    <Cover>
+    <Cover autoSize={true}>
         <svelte:fragment slot="header">
             <Layout.Stack
                 direction={$isSmallViewport ? 'column' : 'row'}
@@ -53,11 +53,3 @@
         </svelte:fragment>
     </Cover>
 {/if}
-
-<style>
-    :global(.top-cover-console:has(.dashboard-header-button)) {
-        @media (max-width: 1024px) {
-            block-size: auto !important;
-        }
-    }
-</style>