style(web): fix add layer resource icon style (#1188)

Co-authored-by: airslice <[email protected]>
reearth · Oct 23, 2024 · 73dc7b7 · 73dc7b7
1 parent bf5e7f8
commit 73dc7b7
Showing 1 changed file with 20 additions and 9 deletions.
diff --git a/web/src/beta/lib/reearth-ui/components/PopupMenu/index.tsx b/web/src/beta/lib/reearth-ui/components/PopupMenu/index.tsx
@@ -10,7 +10,7 @@ import { Link } from "react-router-dom";
 
 const MULTLEVEL_OFFSET = 12;
 const DEFAULT_OFFSET = 4;
-const DEFAULT_MENU_WIDTH = 180;
+const DEFAULT_MENU_WIDTH = 190;
 
 export type CustomSubMenu = {
   title: string;
@@ -112,11 +112,13 @@ export const PopupMenu: FC<PopupMenuProps> = ({
         }}
       >
         {icon && (
-          <Icon
-            icon={icon}
-            size="small"
-            color={iconColor ? iconColor : theme.content.weak}
-          />
+          <IconWrapper>
+            <Icon
+              icon={icon}
+              size="small"
+              color={iconColor ? iconColor : theme.content.weak}
+            />
+          </IconWrapper>
         )}
         <SubItem>
           {subItem ? (
@@ -129,7 +131,9 @@ export const PopupMenu: FC<PopupMenuProps> = ({
             <TitleWrapper disabled={disabled}>{title}</TitleWrapper>
           )}
           {selected && (
-            <Icon icon="check" size="small" color={theme.content.main} />
+            <IconWrapper>
+              <Icon icon="check" size="small" color={theme.content.main} />
+            </IconWrapper>
           )}
         </SubItem>
       </Item>
@@ -265,7 +269,8 @@ const PopupMenuWrapper = styled("div")<{
   boxSizing: "border-box",
   margin: nested ? "-7px 0 0 2px" : "inherit",
   ["::-webkit-scrollbar"]: {
-    width: "8px"
+    width: "8px",
+    height: "8px"
   },
   ["::-webkit-scrollbar-track"]: {
     background: theme.relative.darker,
@@ -306,6 +311,10 @@ const StyledLink = styled(Link)(() => ({
   width: "100%"
 }));
 
+const IconWrapper = styled("div")(() => ({
+  flexGrow: 0,
+  flexShrink: 0
+}));
 const SubMenuHeader = styled("div")(({ theme }) => ({
   color: theme.content.weak,
   fontSize: "11px",
@@ -362,6 +371,8 @@ const TitleWrapper = styled("div")<{ disabled?: boolean }>(
     fontSize: theme.fonts.sizes.body,
     color: disabled ? theme.content.weak : theme.content.main,
     whiteSpace: "nowrap",
-    maxWidth: "160px"
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    maxWidth: 160
   })
 );