--- a/devtools/client/themes/changes.css
+++ b/devtools/client/themes/changes.css
@@ -21,16 +21,26 @@
 :root.theme-dark {
   --diff-add-background-color: rgba(18, 188, 0, 0.15);
   --diff-add-text-color: #12BC00;
   --diff-remove-background-color: rgba(255, 0, 57, 0.15);
   --diff-remove-text-color: #FF0039;
   --diff-source-background: #222225;
 }
 
+:root[dir="rtl"] {
+  /* Increase minimum offset on right-to-left layout to clear the floating scrollbar. */
+  --diff-level-min-offset: 15px;
+}
+
+:root[dir="rtl"] #sidebar-panel-changes .source {
+  /* Enforce left-to-right code rendering on right-to-left layout. */
+  direction: ltr;
+}
+
 #sidebar-panel-changes {
   margin: 0;
   padding: 0;
   width: 100%;
   height: 100%;
   overflow: auto;
   background: var(--theme-sidebar-background);
 }
@@ -38,19 +48,24 @@
 #sidebar-panel-changes .href {
   display: flex;
   align-items: center;
   color: var(--theme-toolbar-color);
   background: var(--diff-source-background);
   border-top: 1px solid var(--theme-splitter-color);
   border-bottom: 1px solid var(--theme-splitter-color);
   padding: 4px;
+  padding-inline-start: var(--diff-level-min-offset);
   font-size: 12px;
 }
 
+#sidebar-panel-changes .source:first-child .href {
+  border-top: unset;
+}
+
 #sidebar-panel-changes .href span {
   /* Allows trimming of flex item with overflow ellipsis within the flex container */
   min-width: 0;
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
 }