095b99f Fix issue text horizonal overflow — radicle-explorer

Radicle web interface

Fix issue text horizonal overflow

Sebastian Martinez committed 2 years ago

commit 095b99fcec56724270d508007baeab2b4df83060
parent 7bbe4716d9a4b87817761a74badb4525e01e1ece

4 files changed +33 -17

modified src/components/Markdown.svelte

@@ -151,7 +151,13 @@

       const preElement = node.parentElement as HTMLElement;
       const copyButton = document.createElement("radicle-clipboard");
       copyButton.setAttribute("text", node.textContent || "");
       preElement.prepend(copyButton);
       // Create a wrapper around the pre element,
       // so we can position the copy button that works even when scrolling horizontally.
       const preWrapper = document.createElement("div");
       preWrapper.classList.add("pre-wrapper");
       preElement.parentNode?.insertBefore(preWrapper, preElement);
       preWrapper.appendChild(preElement);
       preWrapper.appendChild(copyButton);
       const className = Array.from(node.classList).find(name =>
         name.startsWith(prefix),

@@ -214,6 +220,11 @@

     border-bottom: 1px solid var(--color-border-hint);
   }
   .markdown :global(.pre-wrapper) {
     position: relative;
     margin: 1rem 0;
   }
   .markdown :global(radicle-clipboard) {
     display: none;
     position: absolute;

@@ -226,7 +237,7 @@

     border-radius: var(--border-radius-small);
   }
   .markdown :global(pre:hover radicle-clipboard) {
   .markdown :global(.pre-wrapper:hover > radicle-clipboard) {
     display: flex;
   }

@@ -296,23 +307,21 @@

     padding: 0.125rem 0.25rem;
   }
   .markdown :global(pre code) {
   .markdown :global(pre > code) {
     background: none;
     padding: 0;
   }
   .markdown :global(:not(pre) code) {
   .markdown :global(:not(pre) > code) {
     font-size: inherit;
   }
   .markdown :global(pre) {
     position: relative;
     font-family: var(--font-family-monospace);
     font-size: var(--font-size-regular);
     background-color: var(--color-fill-ghost);
     padding: 1rem !important;
     border-radius: var(--border-radius-small);
     margin: 1rem 0;
     overflow: scroll;
     scrollbar-width: none;
   }

modified src/views/projects/Issue.svelte

@@ -442,12 +442,6 @@

     height: 22px;
     margin-top: 1rem;
   }
   .markdown {
     display: flex;
     flex-direction: row;
     align-items: flex-start;
     justify-content: space-between;
   }
   .open {
     color: var(--color-fill-success);
   }

@@ -546,11 +540,9 @@

                 }
               }} />
           {:else}
             <div class="markdown">
               <Markdown
                 content={issue.discussion[0].body}
                 rawPath={rawPath(project.head)} />
             </div>
             <Markdown
               content={issue.discussion[0].body}
               rawPath={rawPath(project.head)} />
           {/if}
           <div class="reactions">
             {#if session}

modified tests/support/fixtures.ts

@@ -672,6 +672,13 @@ export async function createMarkdownFixture(peer: RadiclePeer) {

     cwd: projectFolder,
   });
   await peer.git(["push", "rad"], { cwd: projectFolder });
   await issue.create(
     peer,
     "This `title` has **markdown**",
     'This is a description\n\nWith some multiline text.\n\n```\n23-11-06 10:19 ➜  radicle-jetbrains-plugin git:(main) rad id update --title "Godify jchrist" --description "where jchrist ascends to a god of this project" --delegate did:key:z6MkpaATbhkGbSMysNomYTFVvKG5bnNKYZ2cCamfoHzX9SnL --threshold 1\n\n✓ Identity revision 029837dde8f5c49704e50a19cd709473ac66a456 created\n```',
     ["bug", "feature-request"],
     { cwd: projectFolder },
   );
 }
 export const aliceMainHead = "dd068e9aff9a569e597f6abaf84f120dd0cbbd70";

modified tests/visual/markdown.spec.ts

@@ -184,3 +184,11 @@ test("relative image not able to being loaded", async ({ page }) => {

   });
   await expect(page).toHaveScreenshot({ fullPage: true });
 });
 test("markdown in issues is not overflowing", async ({ page }) => {
   await page.goto(`${markdownUrl}/issues`, {
     waitUntil: "networkidle",
   });
   await page.getByRole("link", { name: "This title has markdown" }).click();
   await expect(page).toHaveScreenshot({ fullPage: true });
 });