make select control adaptive to variance needs

and other adjustments

apps/designer/app/designer/features/inspector/inspector.tsx

@@ -21,7 +21,6 @@ const contentStyle = {
   display: "flex",
   flexDirection: "column",
   overflow: "auto",
-  // boxShadow: "0 -1px 0 $colors$panelOutline",
 };
 
 export const Inspector = ({ publish }: InspectorProps) => {

apps/designer/app/designer/features/style-panel/controls/select/select-control.tsx

@@ -21,13 +21,12 @@ export const SelectControl = ({
   const setValue = setProperty(styleConfig.property);
 
   return (
-    <Flex align="center">
+    <Flex align="center" css={{ gap: "var(--space-gap)" }}>
       <PropertyName
         property={styleConfig.property}
         label={styleConfig.label}
         css={{
-          fontWeight: "500",
-          marginRight: "$sizes$1",
+          flexBasis: "var(--label-inline, 50%)",
         }}
       />
       <Select
@@ -36,10 +35,13 @@ export const SelectControl = ({
         onChange={setValue}
         ghost
         css={{
+          flexGrow: "var(--select-inline, 1)",
           gap: "calc($sizes$1 / 2)",
-          px: "$sizes$1",
-          fontWeight: "500",
+          px: "calc($sizes$1 + $nudge$3)",
+          height: "$sizes$6",
+          boxShadow: "inset 0 0 0 1px $colors$slate7",
           textTransform: "capitalize",
+          fontWeight: "var(--label-weight)",
           "&:hover": { background: "none" },
         }}
       />

apps/designer/app/designer/features/style-panel/sections/layout/layout.tsx

@@ -39,6 +39,13 @@ const layoutSectionFlexStyle = {
       },
     },
   },
+  "& [data-property=display]": {
+    "--space-gap": "$space$2",
+    "--label-weight": "500",
+    "--label-inline": "auto",
+    "--select-inline": "0",
+    "--select-outline": "none",
+  },
 };
 
 const LayoutSectionFlex = ({

apps/designer/app/designer/features/style-panel/shared/property-name.tsx

@@ -16,6 +16,7 @@ export const PropertyName = ({ property, label, css }: PropertyProps) => {
       <Label
         css={{
           gridColumn: "1",
+          fontWeight: "var(--label-weight, 400)",
           ...(isCurrentBreakpoint
             ? {
                 color: propertyNameColorForSelectedBreakpoint,

packages/design-system/src/components/select.tsx

@@ -1,12 +1,7 @@
 import * as SelectPrimitive from "@radix-ui/react-select";
 import noop from "lodash.noop";
 import React, { ReactNode, Ref } from "react";
-import {
-  CheckIcon,
-  ChevronDownIcon,
-  ChevronUpIcon,
-  CaretDownIcon,
-} from "@webstudio-is/icons";
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "@webstudio-is/icons";
 import { styled } from "../stitches.config";
 
 const StyledTrigger = styled(SelectPrimitive.SelectTrigger, {
@@ -177,7 +172,7 @@ const SelectBase = (
           {value ? getLabel(value) : placeholder}
         </SelectPrimitive.Value>
         <StyledIcon>
-          <CaretDownIcon />
+          <ChevronDownIcon />
         </StyledIcon>
       </StyledTrigger>