fix new spacing issues caused by removing content-wrapper padding

apps/gui/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@nostrwatch/gui",
 	"description": "",
-	"version": "0.6.44",
+	"version": "0.6.45",
 	"license": "MIT",
 	"keywords": [
 		"svelte",

apps/gui/src/lib/components/layout/PageHeader.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+
+    import { clickToCopy } from "$utils/ux";
+
+    export let title: string;
+    export let icon: string | undefined = undefined;
+    export let subtitle: string | undefined = undefined;
+    export let copyable: boolean = true;
+    export let banner: string | undefined = undefined;
+    export let bgOpacity: number = 0.2;
+
+    const noop=()=>{}
+
+</script>
+<header
+  id="relay-header"
+  class="relative bg-center bg-cover bg-no-repeat px-3 pb-10 bg-black/20 dark:!bg-white/5 pt-20"
+  style={banner? `background: linear-gradient(rgba(0, 0, 0, ${bgOpacity}), rgba(0, 0, 0, ${bgOpacity})),  url('${banner}'); 
+    background-repeat: no-repeat; 
+    background-size: cover;`: ''}
+>
+  <div class="relative z-10 flex justify-between p-6 h-full">
+    <div class="flex">
+    <div class="flex-shrink-0 mr-2">
+        {#if icon}
+            <span class="inline-block overflow-hidden rounded-full w-20 h-20">
+            <img src="{icon}" alt="relay icon" class="inline mr-2 w-full h-auto" />
+            </span>
+        {/if}
+    </div>
+      <div class="">
+        <h1 class="copy-this relative">
+          <span 
+            class="inline-block -mt-2 relative text-black/50 dark:text-white text-6xl py-2 px-3 rounded-lg cursor-pointer hover:bg-white/50 hover:dark:bg-black/50" 
+            {...(copyable ? { use: clickToCopy } : {})}
+            aria-label="Copy software descriptor"
+          >
+            {title}
+          </span>
+          <span class="copy-message">click to copy</span>
+        </h1>
+        {#if subtitle}
+            <span class="ml-3 text-lg block">{subtitle}</span>
+        {/if}
+
+      </div>
+    </div>
+  </div>
+</header>
+
+<style lang="postcss">
+    h1 > .copy-message {
+        @apply hidden absolute bg-black/50 dark:bg-white/50 text-white dark:text-black text-xs px-1 rounded;
+    }
+
+    h1:hover > .copy-message {
+        @apply block -top-1;
+    }
+</style>
+

apps/gui/src/routes/+page.svelte

@@ -12,7 +12,7 @@
   $: isHomepage = $page.url.pathname === '/'
 </script> 
 {#if isHomepage}
-  <section class="h-[420px] bg-black/5 dark:bg-white/5 flex flex-col justify-center items-center relative z-[200]">
+  <section class="h-[420px] pt-16 bg-black/5 dark:bg-white/5 flex flex-col justify-center items-center relative z-[200]">
     <h1 class="w-full text-center text-3xl mb-4 max-w-[600px]">nostr.watch is a client for browsing, testing and researching nostr relays.</h1>
     <div class="w-full max-w-xl">
       <AutoSuggestRelaysCompact 

apps/gui/src/routes/operators/+page.svelte

@@ -77,7 +77,8 @@
     $: eventsArray = Array.from( $events.entries() ) 
 
 </script>
-
+<main class="mt-16">
 {#if $ready}
     <DataTable {data} {config} {dataKey} />
-{/if}
+{/if}
+</main>

apps/gui/src/routes/operators/[pubkey]/components/OperatorCountries.svelte

@@ -0,0 +1,4 @@
+<script lang="ts">
+
+</script>
+

apps/gui/src/routes/operators/[pubkey]/components/OperatorIsps.svelte

@@ -0,0 +1,4 @@
+<script lang="ts">
+
+</script>
+

apps/gui/src/routes/operators/[pubkey]/components/OperatorRelays.svelte

@@ -0,0 +1,4 @@
+<script lang="ts">
+
+</script>
+

apps/gui/src/routes/operators/[pubkey]/components/OperatorSoftwre.svelte

@@ -0,0 +1,4 @@
+<script lang="ts">
+
+</script>
+

apps/gui/src/routes/preferences/+page.svelte

@@ -14,7 +14,7 @@
         Nip66Instance = instance($route66);
     });
 </script>
-<div class="flex py-4 px-8">
+<div class="flex py-4 px-8 mt-16">
     {#if Nip66Instance !== null}
     <Button on:click={wipeCache} variant="destructive">
     Wipe

apps/gui/src/routes/relays/+page.svelte

@@ -76,10 +76,6 @@
 </script>
 
 <main> 
-
-
-
-
 	{#if $ready}
 	<RelayDimensions />
 	<DataView data={relayCheckAggregates} {config} key={dataKey} {enabledViews} />

apps/gui/src/routes/relays/software/[softwareKey]/+page.svelte

@@ -2,6 +2,7 @@
 	import { page } from "$app/stores";
 	import MapHeat from "$lib/components/DataView/map/MapHeat.svelte";
 	import FeedNoteContent from "$lib/components/feeds/FeedNoteContent.svelte";
+	import PageHeader from "$lib/components/layout/PageHeader.svelte";
 	import BootstrapLoading from "$lib/components/partials/BootstrapLoading.svelte";
 	import Nip66Check from "$lib/components/partials/Nip66Check.svelte";
 	import PubkeyPhoto from "$lib/components/partials/PubkeyPhoto.svelte";
@@ -62,34 +63,10 @@
     });
 </script>
 
-<header
-  id="relay-header"
-  class="relative bg-center bg-cover bg-no-repeat h-48 px-3 py-10 bg-black/20 dark:!bg-white/5"
->
-
-  <div class="relative z-10 flex justify-between p-6 h-full">
-    <div class="flex">
-      <div class="">
-        <h1 class="copy-this relative">
-          <span 
-            class="block -mt-2 relative text-black/50 dark:text-white text-6xl py-2 px-3 rounded-lg cursor-pointer hover:bg-white/50 hover:dark:bg-black/50" 
-            use:clickToCopy 
-            aria-label="Copy software descriptor"
-          >
-            {softwareKey}
-          </span>
-          <span class="copy-message">click to copy software key</span>
-        </h1>
-      </div>
-
-
-    </div>
-
-  </div>
-  <div class="text-xs block clear-both ml-10 font-mono opacity-50" use:clickToCopy>
-    {$page.params.softwareKey}
-  </div>
-</header>
+<PageHeader
+    title={softwareKey} 
+    subtitle={`<div class="text-xs block clear-both ml-10 font-mono opacity-50" use:clickToCopy>${$page.params.softwareKey}</div>`}
+    />
 
 <!-- {#if !bootstrapped}
     <BootstrapLoading />