styling fixes

simularium · Feb 14, 2025 · 12dd053 · 12dd053
1 parent 09e6620
commit 12dd053
Show file tree

Hide file tree

Showing 7 changed files with 30 additions and 6 deletions.
diff --git a/src/components/CustomButton/index.tsx b/src/components/CustomButton/index.tsx
@@ -53,12 +53,13 @@ const generateButtonStyles = (
         },
     }) => {
         const buttonTheme = button[variant][theme];
-        const { background, text, hover, focus, active, disabled } =
+        const { background, text, border, hover, focus, active, disabled } =
             buttonTheme;
 
         return css`
             background-color: ${background};
             color: ${text};
+            border: 1px solid ${border};
 
             &&&& {
                 &:hover:not(:disabled) {

diff --git a/src/components/CustomDropdown/DropdownMenuItems.tsx b/src/components/CustomDropdown/DropdownMenuItems.tsx
@@ -24,6 +24,7 @@ const baseStyles = css`
     font-size: 14px;
 
     &&& {
+        align-items: baseline;
         &:focus-visible,
         &:focus-visible:hover {
             outline: 1.5px solid ${({ theme }) => theme.colors.dropdown.active};

diff --git a/src/components/ModelCard/style.css b/src/components/ModelCard/style.css
@@ -17,16 +17,25 @@
     align-items: flex-start;
 }
 
+.thumbnail {
+    display: grid;
+}
+
+.static-thumbnail,
+.animated-thumbnail {
+      grid-area: 1 / 1;
+}
+
 .animated-thumbnail {
-    display: none;
+    opacity: 0;
 }
 
 .thumbnail:hover .animated-thumbnail {
-    display: block;
+    opacity: 1;
 }
 
 .thumbnail:hover .static-thumbnail {
-    display: none;
+    opacity: 0;
 }
 
 .trajectory-description {
@@ -51,7 +60,8 @@
 }
 
 /* Necessary to make flexbox spacing work */
-.version-tag, .simulated-time {
+.version-tag,
+.simulated-time {
     margin: 0 !important;
 }
 

diff --git a/src/components/SideBar/style.css b/src/components/SideBar/style.css
@@ -18,6 +18,12 @@
     padding: 0 0 0 10px;
 }
 
+.sider.left {
+    left: 0;
+    right: inherit;
+    padding: 0 0 10px;
+}
+
 .sider :global(.ant-collapse-content-box) {
     padding: 3px 0;
 }
@@ -27,6 +33,8 @@
 
 .sider :global(.ant-layout-sider-children) {
     overflow: auto;
+    overflow-x: hidden;
+    overflow-y: auto;
 }
 
 :global(.ant-collapse),

diff --git a/src/components/SideBarContents/style.css b/src/components/SideBarContents/style.css
@@ -12,7 +12,6 @@
     border-radius: 6px;
     flex: 1;
     background-color: var(--dark-theme-sidebar-bg);
-    padding-right: 10px;
 }
 
 .card :global(.ant-card-head) {

diff --git a/src/components/ViewerTitle/style.css b/src/components/ViewerTitle/style.css
@@ -23,4 +23,5 @@
     font-size: 12px;
     border-color: var(--dark-theme-version-badge-purple);
     background-color: var(--dark-theme-version-badge-purple);
+    color: var(--dark-theme-text-color-bright)
 }
diff --git a/src/containers/ModelPanel/style.css b/src/containers/ModelPanel/style.css
@@ -2,6 +2,10 @@
     height: 100%;
 }
 
+.container :global(.ant-card) {
+    padding-right: 10px;
+}
+
 .container :global(.ant-card-body) {
     padding: 0 0 0 10px;
 }