Move background and border-radius styles from Group to Item components

- move hoverable onto .container

Author: robertpiosik

packages/ui/src/components/editor/settings/Group/Group.module.scss

@@ -11,10 +11,8 @@
 }
 
 .container {
-  border-radius: 10px;
   color: var(--vscode-sideBarTitle-foreground);
-  background-color: var(--cwc-bg-tertiary);
-  overflow: hidden;
+  
 
   > div {
     border-top: 1px solid var(--cwc-border-color-dimmed);

packages/ui/src/components/editor/settings/Item/Item.module.scss

@@ -2,6 +2,21 @@
   display: flex;
   flex-direction: column;
   gap: 6px;
+  background-color: var(--cwc-bg-tertiary);
+
+  &--hoverable:hover:not(:has(button:hover, a:hover)) {
+    background-color: var(--vscode-toolbar-hoverBackground);
+  }
+
+  &:first-child {
+    border-top-left-radius: 10px;
+    border-top-right-radius: 10px;
+  }
+
+  &:last-child {
+    border-bottom-left-radius: 10px;
+    border-bottom-right-radius: 10px;
+  }
 }
 
 .main {
@@ -15,10 +30,6 @@
     cursor: pointer;
     user-select: none;
   }
-
-  &--hoverable:hover:not(:has(button:hover, a:hover)) {
-    background-color: var(--vscode-toolbar-hoverBackground);
-  }
 }
 
 .content {

packages/ui/src/components/editor/settings/Item/Item.tsx

@@ -19,11 +19,14 @@ export const Item: React.FC<Props> = (props) => {
   const [is_expanded, set_is_expanded] = useState(false)
 
   return (
-    <div className={styles.container}>
+    <div
+      className={cn(styles.container, {
+        [styles['container--hoverable']]: props.is_toggleable && !is_expanded
+      })}
+    >
       <div
         className={cn(styles.main, {
           [styles['main--toggleable']]: props.is_toggleable,
-          [styles['main--hoverable']]: props.is_toggleable && !is_expanded
         })}
         onClick={props.is_toggleable ? () => set_is_expanded(!is_expanded) : undefined}
       >