[#52711] Style corrections for the preview window

antmicro · Dec 18, 2023 · d1ce3d2 · d1ce3d2
1 parent 695a8bb
commit d1ce3d2
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 5 deletions.
diff --git a/src/components/Preview.js b/src/components/Preview.js
@@ -13,6 +13,7 @@ const Preview = styled.div`
   vertical-align: top;
   color: var(--gray-900);
   word-break: unset;
+  max-width: 50%;
   ${props => !props.$shown && css`
     display: none;
   `}
@@ -45,7 +46,7 @@ const Preview = styled.div`
 
   a {
     color: var(--blue-500);
-    line-break: anywhere;
+    word-break: break-word;
 
     @media print {
       &::after {
@@ -90,8 +91,9 @@ const Preview = styled.div`
     background-color: var(--gray-200);
   }
   code {
-    padding: 0.2em 0.4em;
+    padding: 0.1em 0.4em;
     font-family: "Source Code Pro";
+    font-size: 0.9em;
   }
   pre {
     white-space: pre-wrap;

diff --git a/src/index.html b/src/index.html
@@ -24,10 +24,10 @@
 
 Veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores
 
-  * Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
+  * Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed [do eiusmod tempor incididunt](site.com) ut labore et dolore magna aliqua
   * Consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt
-    * Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime
-    * Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores tempor incididunt ut labore et dolore magna aliqua
+    * Nam libero tempore, cum soluta \`nobis est eligendi\` optio cumque nihil impedit quo minus id quod maxime
+    * Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores tempor incididunt ut \`labore et dolore\` magna aliqua
       * Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
         Eos qui ratione voluptatem sequi nesciunt
     * Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua