fix horizontal scrolling of ScrollPane

lhns · Feb 24, 2023 · 41f367a · 41f367a
1 parent 280dec7
commit 41f367a
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 25 deletions.
diff --git a/src/html/ScrollPane.tsx b/src/html/ScrollPane.tsx
@@ -5,9 +5,11 @@ class ScrollPane extends React.Component<{ children: React.ReactNode }> {
  const {children} = this.props
  return <div className="h-100 d-flex">
  <div className="flex-fill h-100 d-flex flex-column">
- <div className="flex-fill h-0 d-flex">
- <div className="flex-fill overflow-auto">
- {children}
+ <div className="flex-fill h-0 d-flex flex-row">
+ <div className="flex-fill w-0 d-flex">
+ <div className="flex-fill overflow-auto">
+ {children}
+ </div>
  </div>
  </div>
  </div>

diff --git a/src/style.scss b/src/style.scss
@@ -2,50 +2,54 @@
 @import "open-iconic/font/css/open-iconic-bootstrap.css";
 
 html, body, #root {
-  height: 100%;
+ height: 100%;
 }
 
 .h-0 {
- height: 0;
+ height: 0;
+}
+
+.w-0 {
+ width: 0;
 }
 
 .git-panel {
-  width: 18em;
-  border-right: 1px solid var(--bs-gray-300);
+ width: 18em;
+ border-right: 1px solid var(--bs-gray-300);
 }
 
 .git-repo-title {
-  background-color: var(--bs-gray-100);
-  border-bottom: 1px solid var(--bs-gray-300);
-  word-wrap: break-word;
+ background-color: var(--bs-gray-100);
+ border-bottom: 1px solid var(--bs-gray-300);
+ word-wrap: break-word;
 }
 
-.git-repo-title>a {
-  /*color: var(--bs-gray-700);*/
-  text-decoration: none;
-  display: block;
-  padding: .3em;
+.git-repo-title > a {
+ /*color: var(--bs-gray-700);*/
+ text-decoration: none;
+ display: block;
+ padding: .3em;
 }
 
-.git-repo-title>a:hover {
-  background-color: var(--bs-gray-200);
+.git-repo-title > a:hover {
+ background-color: var(--bs-gray-200);
 }
 
 .revert-button {
-  float: right;
-  right: 5px;
-  top: 5px;
-  margin-bottom: 5px;
-  margin-left: 0.8em;
+ float: right;
+ right: 5px;
+ top: 5px;
+ margin-bottom: 5px;
+ margin-left: 0.8em;
 }
 
 .revert-button:hover {
-  color: var(--bs-blue);
+ color: var(--bs-blue);
 }
 
 .je-switcher {
-  padding: 0 2.5em 0 .5em !important;
-  margin-bottom: .5em !important;
+ padding: 0 2.5em 0 .5em !important;
+ margin-bottom: .5em !important;
 }
 
 /*.btn-group>.btn-group:not(:first-child), .btn-group>.btn:not(:first-child) {