chore: small adjustment on dropdown menu

mistgfcs · Aug 30, 2022 · db37bf4 · db37bf4
1 parent 1b0cb54
commit db37bf4
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 2 deletions.
diff --git a/assets/css/app.css b/assets/css/app.css
@@ -40,6 +40,12 @@ poi-main {
   overflow: hidden;
 }
 
+.plugin-dropdown-container,
+.plugin-dropdown-container .bp4-popover-content {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+
 .plugin-dropdown-container > .bp4-popover-content > .bp4-menu {
   background: transparent;
 }

diff --git a/views/components/tab-area/index.es b/views/components/tab-area/index.es
@@ -94,6 +94,15 @@ const PoiTabContainer = styled.div`
 
 const PluginDropdownButton = styled(Button)`
   width: 100%;
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+  ${({ double }) =>
+    double &&
+    css`
+      width: calc(100% - 13.5px);
+      margin-left: 6.5px;
+      margin-right: 7px;
+    `}
 `
 
 const PluginDropdownMenuItem = styled(MenuItem)`
@@ -786,7 +795,7 @@ export class ControlledTabArea extends PureComponent {
           minimal
           hasBackdrop
           popoverClassName="plugin-dropdown-container"
-          position={Position.BOTTOM_RIGHT}
+          position={Position.BOTTOM}
           content={pluginDropdownContents}
           className="nav-tab"
           wrapperTagName="div"
@@ -797,6 +806,7 @@ export class ControlledTabArea extends PureComponent {
             ref={this.trigger}
             minimal
             large
+            double
             icon="chevron-down"
             text={(activePlugin || {}).displayName || defaultPluginTitle}
           />

diff --git a/views/services/layout.es b/views/services/layout.es
@@ -25,7 +25,7 @@ const setCSS = () => {
   additionalStyle.innerHTML = `
 .plugin-dropdown {
   max-height: ${tabSize.height}px;
-  max-width: ${Math.min(panelRect.width * 0.875, tabSize.width)}px;
+  max-width: ${Math.min(panelRect.width * 0.875 - 8, tabSize.width - 16)}px;
 }
 `
 }