UX: Improve git/code oneboxes (#30822)

app/assets/stylesheets/common/base/code_highlighting.scss

@@ -18,7 +18,7 @@ a > code {
 code {
   color: var(--primary-very-high);
   background: var(--hljs-bg);
-  border-radius: var(--d-button-border-radius);
+  border-radius: var(--d-border-radius);
   font-size: 0.875em;
   line-height: calc((13 + 4) / 13);
 }

app/assets/stylesheets/common/base/onebox.scss

@@ -109,6 +109,7 @@ aside.onebox {
   header {
     align-items: center;
     display: flex;
+    line-height: var(--line-height-medium);
     margin-bottom: 1em;
 
     .d-icon {
@@ -230,9 +231,8 @@ aside.onebox {
       }
     }
 
-    // tighten bottom margin on last para
     p:last-child {
-      margin-bottom: 4px;
+      margin-bottom: 0;
     }
 
     // twitter fixes
@@ -374,19 +374,24 @@ pre.onebox {
 
 // -- Onebox Github Code Blob --
 pre.onebox code ol.lines li::before {
+  box-sizing: border-box;
   position: absolute;
   display: inline-block;
-  width: 35px;
+  width: 3.5em;
-  left: -40px;
+  left: calc(-3em + 1px);
-  color: #afafaf;
+  color: var(--primary-600);
   text-align: right;
-  padding-right: 5px;
+  padding-right: 0.5em;
   font-size: var(--font-down-1);
-  line-height: var(--line-height-large);
+  line-height: calc((13 + 9.4) / 13); // matches the `code` line-height
   content: counter(li-counter);
   counter-increment: li-counter;
 }
 
+pre.onebox code ol.lines li.selected::before {
+  background-color: var(--highlight-bg);
+}
+
 .onebox.githubblob,
 .onebox.gitlabblob {
   .onebox-body h4 {
@@ -397,6 +402,11 @@ pre.onebox code ol.lines li::before {
 
   .git-blob-info {
     font-size: var(--font-down-1);
+    line-height: var(--line-height-small);
+  }
+
+  pre {
+    margin-bottom: 0;
   }
 }
 
@@ -410,26 +420,28 @@ pre.onebox code {
 }
 
 pre.onebox code li {
-  padding-left: 5px;
+  padding-left: 0.5em;
 }
 
 pre.onebox code ol.lines {
   position: relative;
-  margin: 0 0 0 40px;
+  margin: 0 0 0 2.5em;
+  padding-left: 0.5em;
 }
 
 pre.onebox code ol.lines li {
   list-style-type: none;
-  padding-left: 5px;
+  padding-left: 0.5em;
   margin-left: 0;
-  border-left: 1px solid #cfcfcf;
+  border-left: 1px solid var(--primary-300);
   min-height: 1.5em; //show empty li lines
   white-space: pre;
   width: max-content;
 }
 
-pre.onebox code li.selected {
+pre.onebox code ol.lines li.selected {
   background-color: var(--highlight-bg);
+  border-left-color: rgba(var(--primary-rgb), 0.2);
 }
 
 pre.onebox code {
@@ -493,17 +505,17 @@ pre.onebox code {
 
   .github-icon {
     grid-area: icon;
-    align-self: center;
+    align-self: stretch;
-    width: 100%;
+    max-width: 1.8em;
-    height: 100%;
+    height: auto;
-    max-width: 2.15em;
+    justify-self: center;
-    margin: 0 auto;
     fill: var(--primary-high);
   }
 
   .branches {
     grid-area: branches;
     font-size: var(--font-down-1);
+    line-height: var(--line-height-medium);
 
     code {
       word-break: break-all;
@@ -527,7 +539,7 @@ pre.onebox code {
     align-items: center;
     flex-wrap: wrap;
     width: 100%;
-    gap: 0.15em 1em;
+    gap: 0.15em 0.75em;
 
     .lines {
       font-weight: bold;
@@ -555,16 +567,21 @@ pre.onebox code {
     overflow-y: auto;
     word-break: break-word;
     font-family: var(--d-font-family--monospace);
+    font-size: 0.875em;
+    line-height: calc((13 + 4) / 13);
     box-sizing: border-box;
 
     .show-more {
+      font-family: var(--font-family);
+
       // padding on right for larger hitzone
-      padding: 0.5em 1.5em 0 0.25em;
+      padding: 0.5em 1em 0 0.2em;
     }
   }
 
   .onebox-avatar-inline {
     border-radius: 2px;
+    vertical-align: text-bottom;
   }
 
   .labels span {

app/assets/stylesheets/common/printer-friendly.scss

@@ -78,7 +78,7 @@
     float: none;
   }
 
-  .topic-post article.boxed .select-posts {
+  .topic-post > article.boxed .select-posts {
     width: auto;
     left: auto;
     right: 0;

app/assets/stylesheets/mobile/topic-post.scss

@@ -10,12 +10,12 @@
 }
 
 .topic-post-visited {
-  + .topic-post article {
+  + .topic-post > article {
     border-top: none;
   }
 }
 
-.topic-post article {
+.topic-post > article {
   border-top: 1px solid var(--primary-low);
   padding: 15px 0 8px 0;
 }

plugins/chat/assets/stylesheets/common/chat-message-images.scss

@@ -34,7 +34,9 @@ $max_image_height: 150px;
     .onebox-body .aspect-image {
       max-width: 50%;
     }
+  }
 
+  .onebox:not(.githubpullrequest, .githubcommit, .githubissue) {
     @container (width < 400px) {
       .onebox-body {
         display: flex;