Make revision actions less tall and refine paddings — radicle-explorer

👉 Preview
👉 Workflow runs
👉 Branch on GitHub

   .card {
     display: flex;
     flex-direction: column;
     padding: 1rem 0;
     padding: 0.5rem 0;
     gap: 0.5rem;
   }
   .card:not(:last-child) {

   .card-header {
     display: flex;
     align-items: center;
     padding: 0 0.5rem;
     padding: 0 0.75rem;
     height: 1.5rem;
     gap: 0.5rem;
     font-size: var(--font-size-small);

     gap: 0.5rem;
   }
   .card-body {
     display: flex;
     align-items: center;
     min-height: 1.625rem;
     word-wrap: break-word;
     font-size: var(--font-size-small);
     padding-left: 2rem;
     padding-right: 2rem;
     padding: 0 2.25rem;
   }
   .card-empty-body {
     padding: 0;
   }
   .actions {
     display: flex;
     flex-direction: row;
     align-items: center;
     gap: 0.5rem;
     padding-left: 2rem;
     padding-left: 2.25rem;
     margin-left: -0.25rem;
   }
   .timestamp {
     font-size: var(--font-size-small);
     color: var(--color-fill-gray);
   }
   .edit-buttons {
     display: flex;
     gap: 0.25rem;

   }
   .connector-line {
     width: 1px;
     height: 28px;
     height: 21px;
     position: absolute;
     top: -16px;
     top: -9px;
     left: -1px;
     background-color: var(--color-fill-separator);
   }
 </style>
 <div class="card" {id} class:reply={isReply}>
 <div class="card" class:card-empty-body={!body} {id} class:reply={isReply}>
   <div style:position="relative">
     {#if isReply}
       <div class="reply-dot" />

       </div>
       <NodeId nodeId={authorId} alias={authorAlias} />
       <slot name="caption">{caption}</slot>
       <span class="card-metadata" title={utils.absoluteTimestamp(timestamp)}>
       <span class="timestamp" title={utils.absoluteTimestamp(timestamp)}>
         {utils.formatTimestamp(timestamp)}
       </span>
       {#if lastEdit}

     </div>
   </div>
   <div class="card-body">
     {#if editComment && state !== "read"}
       {@const editComment_ = editComment}
       <ExtendedTextarea
         {rawPath}
         {body}
         {embeds}
         {enableAttachments}
         submitInProgress={state === "submit"}
         submitCaption="Save"
         placeholder="Leave your comment"
         on:submit={async ({ detail: { comment, embeds } }) => {
           state = "submit";
           try {
             await editComment_(comment, Array.from(embeds.values()));
           } finally {
   {#if body}
     <div class="card-body">
       {#if editComment && state !== "read"}
         {@const editComment_ = editComment}
         <ExtendedTextarea
           {rawPath}
           {body}
           {embeds}
           {enableAttachments}
           submitInProgress={state === "submit"}
           submitCaption="Save"
           placeholder="Leave your comment"
           on:submit={async ({ detail: { comment, embeds } }) => {
             state = "submit";
             try {
               await editComment_(comment, Array.from(embeds.values()));
             } finally {
               state = "read";
             }
           }}
           on:close={async () => {
             body = body;
             await tick();
             state = "read";
           }
         }}
         on:close={async () => {
           body = body;
           await tick();
           state = "read";
         }} />
     {:else if body.trim() === ""}
       <span class="txt-missing">No description</span>
     {:else}
       <Markdown {rawPath} content={body} />
     {/if}
   </div>
           }} />
       {:else}
         <Markdown {rawPath} content={body} />
       {/if}
     </div>
   {/if}
   {#if (id && reactOnComment) || (id && reactions && reactions.length > 0)}
     <div class="actions">
       {#if id && reactOnComment}

   }
 </style>
 <div style="margin-top: 0.875rem;">
 <div>
   <Popover
     popoverPositionBottom="2rem"
     popoverPositionLeft="0"

 <style>
   .action {
     border-radius: var(--border-radius-small);
     min-height: 3rem;
     min-height: 2.5rem;
     display: flex;
     align-items: center;
   }
   .merge {

     display: flex;
     flex-direction: column;
     font-size: 0.875rem;
     margin-left: 1rem;
     margin-left: 1.25rem;
     gap: 0.5rem;
     padding: 1rem 1rem;
     border-left: 1px solid var(--color-fill-separator);

     {#if expanded}
       <div>
         <div class="patch-header">
           <div
             class="authorship-header"
             style:border-top="1px solid var(--color-fill-separator)">
           <div class="authorship-header">
             <div style:color={badgeColor(patchState)}>
               <IconSmall name="patch" />
             </div>
             <NodeId nodeId={revisionAuthor.id} alias={revisionAuthor.alias}>
             </NodeId>
             <NodeId nodeId={revisionAuthor.id} alias={revisionAuthor.alias} />
             {#if patchId === revisionId}
               opened this patch on base
               <span class="global-oid">

                 </span>
               {/if}
             {/if}
             <span title={utils.absoluteTimestamp(revisionTimestamp)}>
             <span
               class="timestamp"
               title={utils.absoluteTimestamp(revisionTimestamp)}>
               {utils.formatTimestamp(revisionTimestamp)}
             </span>
             {#if revisionEdits.length > 1 && lastEdit}

             </Badge>
           {/if}
         </svelte:fragment>
         <div slot="description">
         <svelte:fragment slot="description">
           {#if $experimental && issueState !== "read"}
             <ExtendedTextarea
               isValid={() => newTitle.length > 0}

                   partial(reactOnComment, session, issue.id)} />
             {/if}
           </div>
         </div>
         </svelte:fragment>
         <div class="author" slot="author">
           <NodeId nodeId={issue.author.id} alias={issue.author.alias} />
           opened

         {#if threads.length > 0}
           <div class="connector" />
           <div class="threads">
             {#each threads as thread (thread.root.id)}
             {#each threads as thread, i (thread.root.id)}
               <ThreadComponent
                 enableAttachments
                 {thread}

                 reactOnComment={$experimental &&
                   session &&
                   partial(reactOnComment, session)} />
               <div class="connector" />
               {#if i < threads.length - 1}
                 <div class="connector" />
               {/if}
             {/each}
           </div>
         {/if}