c830a88 Get started: fix mobile overflow and tweak header CTA — radicle-explorer

Radicle web interface

Get started: fix mobile overflow and tweak header CTA

Brandon Oxendine committed 21 days ago

commit c830a88f08e5f6e9fb50ee68d716f64cf789c995
parent 33099ac4eec4217eeba3def877dbf645f85aaa96

3 files changed +12 -7

modified src/components/CopyCommand.svelte

@@ -28,6 +28,7 @@

 <style>
   .wrapper {
     display: block;
     width: 100%;
     overflow: hidden;
   }

modified src/components/Header.svelte

@@ -1,4 +1,6 @@

 <script lang="ts">
   import { activeRouteStore } from "@app/lib/router";
   import Settings from "@app/App/Settings.svelte";
   import Help from "@app/App/Help.svelte";
   import Button from "@app/components/Button.svelte";

@@ -32,11 +34,6 @@

     align-items: center;
     gap: 0.75rem;
   }
   @media (max-width: 719.98px) {
     .get-started {
       display: none;
     }
   }
   .divider {
     height: 1px;
     width: 100%;

@@ -58,13 +55,13 @@

   </div>
   <div class="right-section">
     <span class="get-started">
     {#if $activeRouteStore.resource !== "getStarted"}
       <Link
         route={{ resource: "getStarted" }}
         ariaLabel="Get started with Radicle">
         <Button variant="secondary">Get started with Radicle</Button>
       </Link>
     </span>
     {/if}
     <Popover popoverPositionTop="2.5rem" popoverPositionRight="0">
       <IconButton

modified src/views/getStarted/View.svelte

@@ -104,6 +104,7 @@

     flex-direction: column;
     gap: 1.5rem;
     margin: 0;
     min-width: 0;
   }
   .product-media {

@@ -120,6 +121,8 @@

     flex-direction: column;
     gap: 0.75rem;
     align-items: flex-start;
     min-width: 0;
     width: 100%;
   }
   .product-title {

@@ -307,6 +310,10 @@

       --install-inline-gap: 1.5rem;
     }
     .page-header h1 {
       font: var(--txt-heading-xl);
     }
     .card-row {
       grid-template-columns: 1fr;
     }