Show small disabled seed button on mobile — radicle-explorer

👉 Preview 👉 Workflow runs 👉 Branch on GitHub

   export let projectId: string;
   export let seedCount: number;
   export let disabled: boolean = false;
 </script>
 <style>

     background-color: var(--color-fill-secondary-counter);
     color: var(--color-foreground-match-background);
   }
   .disabled {
     background-color: var(--color-fill-float-hover);
     color: var(--color-foreground-disabled);
   }
 </style>
 <Popover popoverPositionTop="2.5rem" popoverPositionRight="0">
   <Button
     slot="toggle"
     disabled={false}
     {disabled}
     let:toggle
     on:click={() => {
       toggle();

     variant="secondary-toggle-off">
     <IconSmall name="seedling" />
     <span class="title-counter">
       Seed
       <span class="global-hide-on-mobile-down">Seed</span>
       <span
         class="counter not-seeding"
         class:disabled
         style:font-weight="var(--font-weight-regular)">
         {seedCount}
       </span>

         <CloneButton {baseUrl} id={project.id} name={project.name} />
         <SeedButton seedCount={project.seeding} projectId={project.id} />
       </div>
       <div
         style:display="flex"
         style:gap="0.5rem"
         class="global-hide-on-small-desktop-up">
         <SeedButton
           disabled
           seedCount={project.seeding}
           projectId={project.id} />
       </div>
     </div>
   </div>
   <div class="id">