From 4795b9206cfeb2edf573461e02f0c148b9972a36 Mon Sep 17 00:00:00 2001
From: Timothy Flynn <trflynn89@pm.me>
Date: Sun, 21 Jul 2024 09:28:17 -0400
Subject: [PATCH] LibWebView: Prevent displaying two scroll bars in the
 inspector console

We currently display scroll bars for the JS console and its parent tab
container. We want the console output to be separately scrollable from
the tab content, but since both containers are scrollable, we end up
with nested scroll bars. This also makes actually scrolling feel pretty
awkward.

Prevent this by making the tab container non-scrollable when the JS
console is shown.
---
 Base/res/ladybird/inspector.css | 2 +-
 Base/res/ladybird/inspector.js  | 9 +++++++++
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/Base/res/ladybird/inspector.css b/Base/res/ladybird/inspector.css
index 8aad2d16e03..d86179d0311 100644
--- a/Base/res/ladybird/inspector.css
+++ b/Base/res/ladybird/inspector.css
@@ -75,7 +75,7 @@ body {
     border-radius: 0.5rem;
 
     margin-top: 30px;
-    padding: 8px;
+    padding: 8px 0px 0px 4px;
 }
 
 @media (prefers-color-scheme: dark) {
diff --git a/Base/res/ladybird/inspector.js b/Base/res/ladybird/inspector.js
index 45b38aa8034..fae5992aa83 100644
--- a/Base/res/ladybird/inspector.js
+++ b/Base/res/ladybird/inspector.js
@@ -73,6 +73,15 @@ const selectTopTab = (tabButton, tabID) => {
 const selectBottomTab = (tabButton, tabID) => {
     selectedBottomTab = selectTab(tabButton, tabID, selectedBottomTab, selectedBottomTabButton);
     selectedBottomTabButton = tabButton;
+
+    let inspectorBottom = document.getElementById("inspector-bottom");
+    inspectorBottom.scrollTo(0, 0);
+
+    if (tabID === "console") {
+        inspectorBottom.style.overflow = "hidden";
+    } else {
+        inspectorBottom.style.overflow = "scroll";
+    }
 };
 
 let initialTopTabButton = document.getElementById("dom-tree-button");