fix: reduce spectrum popover excessive padding (#2530)

Reduces from ~40px to ~16px. Targets popover dialog only.

Added to styleguide just to be able to preview.

Author: dsmmcken

packages/code-studio/src/styleguide/SpectrumComponents.tsx

@@ -88,6 +88,16 @@ export function SpectrumComponents(): JSX.Element {
                 </Dialog>
               )}
             </DialogTrigger>
+            <DialogTrigger type="popover">
+              <ActionButton>Popover</ActionButton>
+              <Dialog>
+                <Heading>Popover</Heading>
+                <Divider />
+                <Content>
+                  <Text>This is a popover.</Text>
+                </Content>
+              </Dialog>
+            </DialogTrigger>
           </Flex>
         </SampleSection>
         <SampleSection name="spectrum-well" component={View}>

packages/components/src/theme/theme-spectrum/theme-spectrum-overrides.css

@@ -131,3 +131,10 @@ span[class*='spectrum-ToggleSwitch-switch'] {
   /* increase contrast of switch in off position */
   background: var(--dh-toggle-switch-bg);
 }
+
+[class*='spectrum-Popover'] {
+  /* Spectrum popovers have excessive space. Tighten up the dialog padding to match DH style,
+  padding was originally --spectrum-global-dimension-static-size-500) */
+
+  --spectrum-dialog-padding: var(--spectrum-global-dimension-size-200);
+}