From 25d0d37483b2e4c44e19ec8835cba38b73f3fe8a Mon Sep 17 00:00:00 2001
From: undergroundwires <git@undergroundwires.dev>
Date: Fri, 20 Dec 2024 20:28:39 +0100
Subject: [PATCH] Fix scrollbar appearing on tree nodes with code

This commit addresses unexpected horizontal scrollbars appearing in tree
nodes due to incorrect padding calculations for inline code elements.
The issue occurs when vertical padding pushes content beyond the node
boundaries.

The solution:

- Simplify x-padding calculation by removing unnecessary font-size math
- Calculate y-padding using line-height (lh) units for better scaling
- Change code elements to inline-block for proper vertical alignment
---
 .../assets/styles/base/_code-styling.scss     | 57 ++++++++++++++++---
 1 file changed, 48 insertions(+), 9 deletions(-)

diff --git a/src/presentation/assets/styles/base/_code-styling.scss b/src/presentation/assets/styles/base/_code-styling.scss
index dd3419772..4f6d327e8 100644
--- a/src/presentation/assets/styles/base/_code-styling.scss
+++ b/src/presentation/assets/styles/base/_code-styling.scss
@@ -2,7 +2,6 @@
 @use "@/presentation/assets/styles/mixins" as *;
 @use "@/presentation/assets/styles/vite-path" as *;
 @use "@/presentation/assets/styles/typography" as *;
-@use 'sass:math';
 
 @mixin code-block() {
   pre {
@@ -26,13 +25,12 @@
   $color-background,
   $code-block-padding,
 ) {
-  $font-size-code: $font-size-relative-smaller; // Keep relative size to scale right with different text sizes around.
+  $font-size-code-in-percentage: $font-size-relative-smaller; // Keep relative size to scale right with different text sizes around.
   $border-radius: 2px; // Subtle rounding still maintaining sharp design.
 
   @include base-code {
     font-family: $font-family-monospace;
-    border-radius: $border-radius;
-    font-size: $font-size-code;
+    font-size: $font-size-code-in-percentage;
     color: $color-on-primary;
   }
 
@@ -40,13 +38,19 @@
     background: $color-background;
     word-break: break-all; // Enables inline code to wrap with the text, even for long single words (like registry paths), thus preventing overflow.
 
-    $font-size-code-in-decimal: math.div($font-size-code, 100%); // Converts percentage (e.g., 85%) to decimal (e.g., 0.85) for calculations.
-    $font-size-code-in-em: calc(1em * #{$font-size-code-in-decimal});
-    $vertical-padding: calc((1em - #{$font-size-code-in-em}) / 2);
-    $horizontal-padding: calc(#{$font-size-code-in-em} * 0.4);
-    padding: $vertical-padding $horizontal-padding;
+    $padding-x-max      : 8px;
+    $padding-x-desired  : 0.4em;
+    $padding-y-max      : 4px;
+    $padding-y-desired  : calculate-min-vertical-empty-space($font-size-code-in-percentage);
+    $padding-y-desired  : calc(calculate-min-vertical-empty-space($font-size-code-in-percentage) / 2);
+
+    $padding-y: min($padding-y-desired, $padding-y-max);
+    $padding-x: min($padding-x-desired, $padding-x-max);
+    padding: #{$padding-y} #{$padding-x};
+    display: inline-block; // Required for centering, otherwise contents align towards bottom with Y padding, causing overflows
   }
 
+
   @include code-block {
     background: $color-background;
     border-radius: $border-radius;
@@ -54,3 +58,38 @@
     padding: $code-block-padding;
   }
 }
+
+@function convert-percentage-to-decimal-ratio($current-relative-font-size) {
+  @return calc($current-relative-font-size / 100%);
+}
+
+
+@function calculate-inline-parent-min-line-height(
+  $inline-child-relative-font-size-in-decimal,
+) {
+  $parent-line-height: calc(
+    1lh /* self height, height = 1 lh for inline element*/
+    /
+    #{$inline-child-relative-font-size-in-decimal} /* minimum possible font size of parent */
+  );
+  $parent-min-height: round(down, #{$parent-line-height}, 1px);
+  @return $parent-min-height;
+}
+
+@function calculate-vertical-empty-space($parent-min-line-height) {
+  $available-space: calc(
+    #{$parent-min-line-height} /* Parent should be able to show single line of text text */
+    -
+    1lh, /* self height, height = 1 lh for inline element*/
+  );
+  @return max(#{$available-space}, 0px); // Return 0px if there's no available space
+}
+
+@function calculate-min-vertical-empty-space(
+  $inline-element-relative-font-size-in-percentage,
+) {
+  $self-font-size-relative-in-decimal: convert-percentage-to-decimal-ratio($inline-element-relative-font-size-in-percentage);
+  $parent-minimum-height: calculate-inline-parent-min-line-height($self-font-size-relative-in-decimal);
+  $total-empty-space-y: calculate-vertical-empty-space($parent-minimum-height);
+  @return $total-empty-space-y;
+}