From 88f832012d544ab72aedd2ad479959d79369d7b4 Mon Sep 17 00:00:00 2001
From: Alex Andreev <alex.andreev.email@gmail.com>
Date: Fri, 7 Apr 2023 13:56:52 +0300
Subject: [PATCH] Add styles for details panel

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
---
 .../mutating-webhook-configs-details.module.css          | 9 +++++++++
 .../mutating-webhook-configurations-details.tsx          | 9 +++++----
 2 files changed, 14 insertions(+), 4 deletions(-)
 create mode 100644 packages/core/src/renderer/components/+config-mutating-webhook-configurations/mutating-webhook-configs-details.module.css

diff --git a/packages/core/src/renderer/components/+config-mutating-webhook-configurations/mutating-webhook-configs-details.module.css b/packages/core/src/renderer/components/+config-mutating-webhook-configurations/mutating-webhook-configs-details.module.css
new file mode 100644
index 0000000000..f4090ece62
--- /dev/null
+++ b/packages/core/src/renderer/components/+config-mutating-webhook-configurations/mutating-webhook-configs-details.module.css
@@ -0,0 +1,9 @@
+.matchLabels {
+    display: flex;
+    gap: 0.5rem;
+    flex-wrap: wrap;
+}
+
+.lastItem + .firstItem {
+    margin-top: 1rem;
+}
diff --git a/packages/core/src/renderer/components/+config-mutating-webhook-configurations/mutating-webhook-configurations-details.tsx b/packages/core/src/renderer/components/+config-mutating-webhook-configurations/mutating-webhook-configurations-details.tsx
index 2560515c5e..d40a00ad81 100644
--- a/packages/core/src/renderer/components/+config-mutating-webhook-configurations/mutating-webhook-configurations-details.tsx
+++ b/packages/core/src/renderer/components/+config-mutating-webhook-configurations/mutating-webhook-configurations-details.tsx
@@ -2,6 +2,7 @@
  * Copyright (c) OpenLens Authors. All rights reserved.
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
+import styles from "./mutating-webhook-configs-details.module.css";
 
 import React from "react";
 import { observer } from "mobx-react";
@@ -29,7 +30,7 @@ export class MutatingWebhookDetails extends React.Component<MutatingWebhookDetai
         )}
         {webhookConfig.getWebhooks()?.map((webhook) => (
           <React.Fragment key={webhook.name}>
-            <DrawerItem name="Name">
+            <DrawerItem name="Name" className={styles.firstItem}>
               <strong>{webhook.name}</strong>
             </DrawerItem>
             <DrawerItem name="Client Config">
@@ -92,7 +93,7 @@ export class MutatingWebhookDetails extends React.Component<MutatingWebhookDetai
                   {webhook.namespaceSelector.matchLabels && (
                     <div>
                       <div>Match Labels:</div>
-                      <div style={{ display: "flex", gap: "0.5rem", flexWrap: "wrap" }}>
+                      <div className={styles.matchLabels}>
                         {Object.entries(webhook.namespaceSelector.matchLabels).map(([key, value], index) => (
                           <Badge label={`${key}=${value}`} key={index} />
                         ))}
@@ -128,7 +129,7 @@ export class MutatingWebhookDetails extends React.Component<MutatingWebhookDetai
                   {webhook.objectSelector.matchLabels && (
                     <div>
                       <div>Match Labels:</div>
-                      <div style={{ display: "flex", gap: "0.5rem", flexWrap: "wrap" }}>
+                      <div className={styles.matchLabels}>
                         {Object.entries(webhook.objectSelector.matchLabels).map(([key, value], index) => (
                           <Badge label={`${key}=${value}`} key={index} />
                         ))}
@@ -138,7 +139,7 @@ export class MutatingWebhookDetails extends React.Component<MutatingWebhookDetai
                 </div>
               )}
             </DrawerItem>
-            <DrawerItem name="Rules">
+            <DrawerItem name="Rules" className={styles.lastItem}>
               {webhook.rules?.map((rule, index) => (
                 <div key={index}>
                   <div>