Eliminate popoverWidth property

Users of `Popover` can set the width by setting it on the slot element. Signed-off-by: Thomas Scholtes <[email protected]>
radicle-dev · Nov 7, 2023 · 2d97d85 · 2d97d85
1 parent bee31bb
commit 2d97d85
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 24 deletions.
diff --git a/src/App/Footer.svelte b/src/App/Footer.svelte
@@ -57,16 +57,15 @@
     for keyboard shortcuts
   </div>
   <div class="right">
-    <Popover
-      popoverPositionBottom="2rem"
-      popoverPositionRight="0"
-      popoverWidth="21rem">
+    <Popover popoverPositionBottom="2rem" popoverPositionRight="0">
       <IconButton slot="toggle" let:toggle on:click={toggle}>
         <IconSmall name="brush" />
         Theme
       </IconButton>
 
-      <ThemeSettings slot="popover" />
+      <div slot="popover" style:width="19rem">
+        <ThemeSettings />
+      </div>
     </Popover>
 
     <a

diff --git a/src/App/Header/Connect.svelte b/src/App/Header/Connect.svelte
@@ -26,6 +26,7 @@
     display: flex;
     flex-direction: column;
     gap: 1.5rem;
+    width: "23rem";
   }
   .host {
     display: flex;
@@ -78,10 +79,7 @@
 </style>
 
 {#if $httpdStore.state === "authenticated"}
-  <Popover
-    popoverPositionTop="3rem"
-    popoverPositionRight="0"
-    popoverWidth="25rem">
+  <Popover popoverPositionTop="3rem" popoverPositionRight="0">
     <Button
       slot="toggle"
       let:toggle

diff --git a/src/components/Popover.svelte b/src/components/Popover.svelte
@@ -14,7 +14,6 @@
   export let popoverPositionLeft: string | undefined = undefined;
   export let popoverPositionRight: string | undefined = undefined;
   export let popoverPositionTop: string | undefined = undefined;
-  export let popoverWidth: string | undefined = undefined;
 
   let expanded = false;
   let thisComponent: HTMLDivElement;
@@ -62,8 +61,7 @@
       style:right={popoverPositionRight}
       style:top={popoverPositionTop}
       style:padding={popoverPadding}
-      style:border-radius={popoverBorderRadius}
-      style:width={popoverWidth}>
+      style:border-radius={popoverBorderRadius}>
       <slot name="popover" />
     </div>
   {/if}

diff --git a/src/views/projects/Header/CloneButton.svelte b/src/views/projects/Header/CloneButton.svelte
@@ -33,10 +33,7 @@
   }
 </style>
 
-<Popover
-  popoverPositionTop="3rem"
-  popoverPositionRight="0"
-  popoverWidth="26rem">
+<Popover popoverPositionTop="3rem" popoverPositionRight="0">
   <Button
     slot="toggle"
     let:toggle
@@ -47,7 +44,7 @@
     <Icon name="download" />
   </Button>
 
-  <svelte:fragment slot="popover">
+  <div slot="popover" style:width="24rem">
     <div style:margin-bottom="1.5rem">
       <label for="rad-clone-url">
         Use the <a
@@ -66,5 +63,5 @@
       <label for="git-clone-url">Use Git to clone this repository.</label>
       <Command command={gitCloneUrl} />
     </div>
-  </svelte:fragment>
+  </div>
 </Popover>
diff --git a/src/views/projects/Header/TrackButton.svelte b/src/views/projects/Header/TrackButton.svelte
@@ -30,10 +30,7 @@
   }
 </style>
 
-<Popover
-  popoverPositionTop="3rem"
-  popoverPositionRight="0"
-  popoverWidth="33rem">
+<Popover popoverPositionTop="3rem" popoverPositionRight="0">
   <Button
     slot="toggle"
     let:toggle
@@ -56,7 +53,7 @@
     </span>
   </Button>
 
-  <svelte:fragment slot="popover">
+  <div slot="popover" style:width="31rem">
     <div class="track-label">
       Use the <a
         target="_blank"
@@ -84,5 +81,5 @@
       {/if}
     </div>
     <Command command={`rad ${command} ${projectId}`} />
-  </svelte:fragment>
+  </div>
 </Popover>