[M136] Fix paddings and corner radii for flex, grid and shadow editors

Bug: 409771454
Change-Id: I19e9840d78ee245c1a15b5d8e65485eb227d4aa1
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6459230
Reviewed-by: Kim-Anh Tran <[email protected]>
Commit-Queue: Kateryna Prokopenko <[email protected]>
Auto-Submit: Kateryna Prokopenko <[email protected]>
Commit-Queue: Kim-Anh Tran <[email protected]>
(cherry picked from commit 199588f)
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6513135

Author: Kateryna Prokopenko

front_end/panels/elements/ColorSwatchPopoverIcon.ts

@@ -342,6 +342,7 @@ export class ShadowSwatchPopoverHelper extends Common.ObjectWrapper.ObjectWrappe
     }
 
     this.cssShadowEditor = new InlineEditor.CSSShadowEditor.CSSShadowEditor();
+    this.cssShadowEditor.element.classList.toggle('with-padding', true);
     this.cssShadowEditor.setModel(this.shadowSwatch.model());
     this.cssShadowEditor.addEventListener(InlineEditor.CSSShadowEditor.Events.SHADOW_CHANGED, this.boundShadowChanged);
     this.swatchPopoverHelper.show(this.cssShadowEditor, this.iconElement, this.onPopoverHidden.bind(this));

front_end/panels/elements/StyleEditorWidget.ts

@@ -125,6 +125,7 @@ export class StyleEditorWidget extends UI.Widget.VBox {
       event.stopPropagation();
       const popoverHelper = pane.swatchPopoverHelper();
       const widget = StyleEditorWidget.instance();
+      widget.element.classList.toggle('with-padding', true);
       widget.setEditor(editorClass);
       widget.bindContext(pane, section);
       widget.setTriggerKey(triggerKey);

front_end/ui/legacy/components/inline_editor/swatchPopover.css

@@ -14,3 +14,8 @@
   background-color: var(--sys-color-base-container-elevated);
   border-radius: var(--sys-shape-corner-extra-small);
 }
+
+.with-padding {
+  padding: var(--sys-size-4);
+  border-radius: var(--sys-shape-corner-small);
+}