Fix some icon clipping and alignment

Issue #172
openscopeproject · Apr 7, 2024 · b1188cd · b1188cd
1 parent 05303b6
commit b1188cd
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 4 deletions.
diff --git a/src/components/filters.tsx b/src/components/filters.tsx
@@ -143,7 +143,7 @@ const FilterRow = React.memo(function FilterRow(props: FilterRowProps) {
                 filter: { id: props.id, filter: props.filter.filter },
             });
         }}>
-        <div style={{ flexShrink: 0 }}><props.filter.icon /></div>
+        <div className="icon-container"><props.filter.icon /></div>
         <div style={{ flexShrink: 1, overflow: "hidden", textOverflow: "ellipsis" }}>{props.filter.name}</div>
         <div style={{ flexShrink: 0 }}>{`(${props.count})`}</div>
     </Flex>;
@@ -201,7 +201,7 @@ function DirFilterRow(props: DirFilterRowProps) {
                     filter: { id: props.id, filter },
                 });
             }}>
-            <div style={{ flexShrink: 0 }}>
+            <div className="icon-container">
                 {expandable
                     ? props.dir.expanded
                         ? <Icon.DashSquare size="1.1rem" onClick={onCollapse} style={{ cursor: "pointer" }} />

diff --git a/src/components/mantinetheme.tsx b/src/components/mantinetheme.tsx
@@ -125,6 +125,9 @@ function GlobalStyles() {
                     ? theme.fn.rgba(theme.colors.gray[7], 0.5)
                     : theme.fn.rgba(theme.colors.gray[5], 0.5),
             },
+            "svg:not(:root)": {
+                overflow: "visible",
+            },
         })} />
     );
 }

diff --git a/src/components/tables/filetreetable.tsx b/src/components/tables/filetreetable.tsx
@@ -121,7 +121,7 @@ function NameField(props: TableFieldProps) {
                         onDoubleClick={(e) => { e.stopPropagation(); }} />
                 }
             </Box>
-            <Box ml="xs" sx={{ flexShrink: 0, height: "100%" }}>
+            <Box ml="xs" className="icon-container">
                 {isDir
                     ? props.row.getIsExpanded()
                         ? <Icon.DashSquare size="1.1rem" onClick={onToggleExpand} style={{ cursor: "pointer" }} />

diff --git a/src/components/tables/torrenttable.tsx b/src/components/tables/torrenttable.tsx
@@ -193,7 +193,7 @@ function NameField(props: TableFieldProps) {
 
     return (
         <EditableNameField currentName={currentName} onUpdate={rpcVersion >= 15 ? updateTorrentName : undefined}>
-            <Box pb="xs" sx={{ flexShrink: 0 }}>
+            <Box pb="xs" className="icon-container">
                 <StatusIcon />
             </Box>
         </EditableNameField>

diff --git a/src/css/custom.css b/src/css/custom.css
@@ -29,6 +29,15 @@ img {
     vertical-align: middle;
 }
 
+svg:not(:root) {
+    overflow: visible;
+}
+
+.icon-container {
+    flex-shrink: 0;
+    display: contents;
+}
+
 .split-horizontal {
     display: flex;
     flex-direction: row;