From 2a4fe403e9e11400fb1c99aefdf0a8cb1c5ecb02 Mon Sep 17 00:00:00 2001
From: Jenny <32821331+jenny-s51@users.noreply.github.com>
Date: Mon, 10 Nov 2025 15:09:41 -0500
Subject: [PATCH] fix: cancel button variant and expandable spacing

Signed-off-by: Jenny <32821331+jenny-s51@users.noreply.github.com>
---
 workspaces/frontend/src/app/App.tsx           |   1 +
 .../WorkspaceKinds/Form/WorkspaceKindForm.tsx |  62 +++--
 .../fileUpload/WorkspaceKindFileUpload.tsx    |   2 +-
 .../Form/image/WorkspaceKindFormImage.tsx     | 114 ++++----
 .../podConfig/WorkspaceKindFormPodConfig.tsx  | 124 +++++----
 .../WorkspaceKindFormPodTemplate.tsx          | 246 +++++++++---------
 .../WorkspaceKindFormProperties.tsx           | 172 ++++++------
 .../pages/Workspaces/Form/WorkspaceForm.tsx   |   2 +-
 8 files changed, 361 insertions(+), 362 deletions(-)

diff --git a/workspaces/frontend/src/app/App.tsx b/workspaces/frontend/src/app/App.tsx
index 101f4b69..dcedc642 100644
--- a/workspaces/frontend/src/app/App.tsx
+++ b/workspaces/frontend/src/app/App.tsx
@@ -27,6 +27,7 @@ const App: React.FC = () => {
               <NamespaceContextProvider>
                 <Page
                   mainContainerId="primary-app-container"
+                  isContentFilled
                   masthead={
                     isStandalone ? (
                       <NavBar
diff --git a/workspaces/frontend/src/app/pages/WorkspaceKinds/Form/WorkspaceKindForm.tsx b/workspaces/frontend/src/app/pages/WorkspaceKinds/Form/WorkspaceKindForm.tsx
index c2955ee0..dbd54d38 100644
--- a/workspaces/frontend/src/app/pages/WorkspaceKinds/Form/WorkspaceKindForm.tsx
+++ b/workspaces/frontend/src/app/pages/WorkspaceKinds/Form/WorkspaceKindForm.tsx
@@ -184,32 +184,40 @@ export const WorkspaceKindForm: React.FC = () => {
           </Stack>
         )}
         {mode === 'edit' && (
-          <>
-            <WorkspaceKindFormProperties
-              mode={mode}
-              properties={data.properties}
-              updateField={(properties) => setData('properties', properties)}
-            />
-            <WorkspaceKindFormImage
-              mode={mode}
-              imageConfig={data.imageConfig}
-              updateImageConfig={(imageInput) => {
-                setData('imageConfig', imageInput);
-              }}
-            />
-            <WorkspaceKindFormPodConfig
-              podConfig={data.podConfig}
-              updatePodConfig={(podConfig) => {
-                setData('podConfig', podConfig);
-              }}
-            />
-            <WorkspaceKindFormPodTemplate
-              podTemplate={data.podTemplate}
-              updatePodTemplate={(podTemplate) => {
-                setData('podTemplate', podTemplate);
-              }}
-            />
-          </>
+          <Stack hasGutter>
+            <StackItem>
+              <WorkspaceKindFormProperties
+                mode={mode}
+                properties={data.properties}
+                updateField={(properties) => setData('properties', properties)}
+              />
+            </StackItem>
+            <StackItem>
+              <WorkspaceKindFormImage
+                mode={mode}
+                imageConfig={data.imageConfig}
+                updateImageConfig={(imageInput) => {
+                  setData('imageConfig', imageInput);
+                }}
+              />
+            </StackItem>
+            <StackItem>
+              <WorkspaceKindFormPodConfig
+                podConfig={data.podConfig}
+                updatePodConfig={(podConfig) => {
+                  setData('podConfig', podConfig);
+                }}
+              />
+            </StackItem>
+            <StackItem>
+              <WorkspaceKindFormPodTemplate
+                podTemplate={data.podTemplate}
+                updatePodTemplate={(podTemplate) => {
+                  setData('podTemplate', podTemplate);
+                }}
+              />
+            </StackItem>
+          </Stack>
         )}
       </PageSection>
       <PageSection isFilled={false} stickyOnBreakpoint={{ default: 'bottom' }}>
@@ -226,7 +234,7 @@ export const WorkspaceKindForm: React.FC = () => {
             </Button>
           </FlexItem>
           <FlexItem>
-            <Button variant="link" isInline onClick={cancel}>
+            <Button variant="link" onClick={cancel}>
               Cancel
             </Button>
           </FlexItem>
diff --git a/workspaces/frontend/src/app/pages/WorkspaceKinds/Form/fileUpload/WorkspaceKindFileUpload.tsx b/workspaces/frontend/src/app/pages/WorkspaceKinds/Form/fileUpload/WorkspaceKindFileUpload.tsx
index bd0b5d1d..b4c534b9 100644
--- a/workspaces/frontend/src/app/pages/WorkspaceKinds/Form/fileUpload/WorkspaceKindFileUpload.tsx
+++ b/workspaces/frontend/src/app/pages/WorkspaceKinds/Form/fileUpload/WorkspaceKindFileUpload.tsx
@@ -86,7 +86,7 @@ export const WorkspaceKindFileUpload: React.FC<WorkspaceKindFileUploadProps> = (
   }, []);
 
   return (
-    <Content style={{ height: '100%' }}>
+    <Content>
       <FileUpload
         className="workspacekind-file-upload"
         id="text-file-simple"
diff --git a/workspaces/frontend/src/app/pages/WorkspaceKinds/Form/image/WorkspaceKindFormImage.tsx b/workspaces/frontend/src/app/pages/WorkspaceKinds/Form/image/WorkspaceKindFormImage.tsx
index 05c4982f..e0f63330 100644
--- a/workspaces/frontend/src/app/pages/WorkspaceKinds/Form/image/WorkspaceKindFormImage.tsx
+++ b/workspaces/frontend/src/app/pages/WorkspaceKinds/Form/image/WorkspaceKindFormImage.tsx
@@ -105,66 +105,64 @@ export const WorkspaceKindFormImage: React.FC<WorkspaceKindFormImageProps> = ({
 
   return (
     <Content>
-      <div className="pf-u-mb-0">
-        <ExpandableSection
-          toggleText="Workspace Images"
-          onToggle={() => setIsExpanded((prev) => !prev)}
-          isExpanded={isExpanded}
-          isIndented
+      <ExpandableSection
+        toggleText="Workspace Images"
+        onToggle={() => setIsExpanded((prev) => !prev)}
+        isExpanded={isExpanded}
+        isIndented
+      >
+        {imageConfig.values.length === 0 && (
+          <EmptyState titleText="Start by creating an image" headingLevel="h4" icon={CubesIcon}>
+            <EmptyStateBody>Add an image configuration to your Workspace Kind</EmptyStateBody>
+            <EmptyStateFooter>
+              <EmptyStateActions>{addImageBtn}</EmptyStateActions>
+            </EmptyStateFooter>
+          </EmptyState>
+        )}
+        {imageConfig.values.length > 0 && (
+          <div>
+            <WorkspaceKindFormPaginatedTable
+              ariaLabel="Images table"
+              rows={imageConfig.values}
+              defaultId={defaultId}
+              setDefaultId={(id) => {
+                updateImageConfig({ ...imageConfig, default: id });
+                setDefaultId(id);
+              }}
+              handleEdit={handleEdit}
+              openDeleteModal={openDeleteModal}
+            />
+            {addImageBtn}
+          </div>
+        )}
+        <WorkspaceKindFormImageModal
+          isOpen={isModalOpen}
+          onClose={clearForm}
+          onSubmit={handleAddOrEditSubmit}
+          editIndex={editIndex}
+          image={image}
+          setImage={setImage}
+          mode={mode}
+        />
+        <Modal
+          isOpen={isDeleteModalOpen}
+          onClose={() => setIsDeleteModalOpen(false)}
+          variant={ModalVariant.small}
         >
-          {imageConfig.values.length === 0 && (
-            <EmptyState titleText="Start by creating an image" headingLevel="h4" icon={CubesIcon}>
-              <EmptyStateBody>Add an image configuration to your Workspace Kind</EmptyStateBody>
-              <EmptyStateFooter>
-                <EmptyStateActions>{addImageBtn}</EmptyStateActions>
-              </EmptyStateFooter>
-            </EmptyState>
-          )}
-          {imageConfig.values.length > 0 && (
-            <div>
-              <WorkspaceKindFormPaginatedTable
-                ariaLabel="Images table"
-                rows={imageConfig.values}
-                defaultId={defaultId}
-                setDefaultId={(id) => {
-                  updateImageConfig({ ...imageConfig, default: id });
-                  setDefaultId(id);
-                }}
-                handleEdit={handleEdit}
-                openDeleteModal={openDeleteModal}
-              />
-              {addImageBtn}
-            </div>
-          )}
-          <WorkspaceKindFormImageModal
-            isOpen={isModalOpen}
-            onClose={clearForm}
-            onSubmit={handleAddOrEditSubmit}
-            editIndex={editIndex}
-            image={image}
-            setImage={setImage}
-            mode={mode}
+          <ModalHeader
+            title="Remove Image?"
+            description="This image will be removed from the workspace kind."
           />
-          <Modal
-            isOpen={isDeleteModalOpen}
-            onClose={() => setIsDeleteModalOpen(false)}
-            variant={ModalVariant.small}
-          >
-            <ModalHeader
-              title="Remove Image?"
-              description="This image will be removed from the workspace kind."
-            />
-            <ModalFooter>
-              <Button key="remove" variant="danger" onClick={handleDelete}>
-                Remove
-              </Button>
-              <Button key="cancel" variant="link" onClick={() => setIsDeleteModalOpen(false)}>
-                Cancel
-              </Button>
-            </ModalFooter>
-          </Modal>
-        </ExpandableSection>
-      </div>
+          <ModalFooter>
+            <Button key="remove" variant="danger" onClick={handleDelete}>
+              Remove
+            </Button>
+            <Button key="cancel" variant="link" onClick={() => setIsDeleteModalOpen(false)}>
+              Cancel
+            </Button>
+          </ModalFooter>
+        </Modal>
+      </ExpandableSection>
     </Content>
   );
 };
diff --git a/workspaces/frontend/src/app/pages/WorkspaceKinds/Form/podConfig/WorkspaceKindFormPodConfig.tsx b/workspaces/frontend/src/app/pages/WorkspaceKinds/Form/podConfig/WorkspaceKindFormPodConfig.tsx
index 8e70a3d9..1f880b80 100644
--- a/workspaces/frontend/src/app/pages/WorkspaceKinds/Form/podConfig/WorkspaceKindFormPodConfig.tsx
+++ b/workspaces/frontend/src/app/pages/WorkspaceKinds/Form/podConfig/WorkspaceKindFormPodConfig.tsx
@@ -101,71 +101,69 @@ export const WorkspaceKindFormPodConfig: React.FC<WorkspaceKindFormPodConfigProp
 
   return (
     <Content>
-      <div className="pf-u-mb-0">
-        <ExpandableSection
-          toggleText="Pod Configurations"
-          onToggle={() => setIsExpanded((prev) => !prev)}
-          isExpanded={isExpanded}
-          isIndented
-        >
-          {podConfig.values.length === 0 && (
-            <EmptyState
-              titleText="Start by creating a pod configuration"
-              headingLevel="h4"
-              icon={CubesIcon}
-            >
-              <EmptyStateBody>
-                Configure specifications for pods and containers in your Workspace Kind
-              </EmptyStateBody>
-              <EmptyStateFooter>
-                <EmptyStateActions>{addConfigBtn}</EmptyStateActions>
-              </EmptyStateFooter>
-            </EmptyState>
-          )}
-          {podConfig.values.length > 0 && (
-            <>
-              <WorkspaceKindFormPaginatedTable
-                ariaLabel="Pod Configs Table"
-                rows={podConfig.values}
-                defaultId={defaultId}
-                setDefaultId={(id) => {
-                  updatePodConfig({ ...podConfig, default: id });
-                  setDefaultId(id);
-                }}
-                handleEdit={handleEdit}
-                openDeleteModal={openDeleteModal}
-              />
-              {addConfigBtn}
-            </>
-          )}
-          <WorkspaceKindFormPodConfigModal
-            isOpen={isModalOpen}
-            onClose={clearForm}
-            onSubmit={handleAddOrEditSubmit}
-            editIndex={editIndex}
-            currConfig={currConfig}
-            setCurrConfig={setCurrConfig}
-          />
-          <Modal
-            isOpen={isDeleteModalOpen}
-            onClose={() => setIsDeleteModalOpen(false)}
-            variant={ModalVariant.small}
+      <ExpandableSection
+        toggleText="Pod Configurations"
+        onToggle={() => setIsExpanded((prev) => !prev)}
+        isExpanded={isExpanded}
+        isIndented
+      >
+        {podConfig.values.length === 0 && (
+          <EmptyState
+            titleText="Start by creating a pod configuration"
+            headingLevel="h4"
+            icon={CubesIcon}
           >
-            <ModalHeader
-              title="Remove Pod Config?"
-              description="The pod config will be removed from the workspace kind."
+            <EmptyStateBody>
+              Configure specifications for pods and containers in your Workspace Kind
+            </EmptyStateBody>
+            <EmptyStateFooter>
+              <EmptyStateActions>{addConfigBtn}</EmptyStateActions>
+            </EmptyStateFooter>
+          </EmptyState>
+        )}
+        {podConfig.values.length > 0 && (
+          <>
+            <WorkspaceKindFormPaginatedTable
+              ariaLabel="Pod Configs Table"
+              rows={podConfig.values}
+              defaultId={defaultId}
+              setDefaultId={(id) => {
+                updatePodConfig({ ...podConfig, default: id });
+                setDefaultId(id);
+              }}
+              handleEdit={handleEdit}
+              openDeleteModal={openDeleteModal}
             />
-            <ModalFooter>
-              <Button key="remove" variant="danger" onClick={handleDelete}>
-                Remove
-              </Button>
-              <Button key="cancel" variant="link" onClick={() => setIsDeleteModalOpen(false)}>
-                Cancel
-              </Button>
-            </ModalFooter>
-          </Modal>
-        </ExpandableSection>
-      </div>
+            {addConfigBtn}
+          </>
+        )}
+        <WorkspaceKindFormPodConfigModal
+          isOpen={isModalOpen}
+          onClose={clearForm}
+          onSubmit={handleAddOrEditSubmit}
+          editIndex={editIndex}
+          currConfig={currConfig}
+          setCurrConfig={setCurrConfig}
+        />
+        <Modal
+          isOpen={isDeleteModalOpen}
+          onClose={() => setIsDeleteModalOpen(false)}
+          variant={ModalVariant.small}
+        >
+          <ModalHeader
+            title="Remove Pod Config?"
+            description="The pod config will be removed from the workspace kind."
+          />
+          <ModalFooter>
+            <Button key="remove" variant="danger" onClick={handleDelete}>
+              Remove
+            </Button>
+            <Button key="cancel" variant="link" onClick={() => setIsDeleteModalOpen(false)}>
+              Cancel
+            </Button>
+          </ModalFooter>
+        </Modal>
+      </ExpandableSection>
     </Content>
   );
 };
diff --git a/workspaces/frontend/src/app/pages/WorkspaceKinds/Form/podTemplate/WorkspaceKindFormPodTemplate.tsx b/workspaces/frontend/src/app/pages/WorkspaceKinds/Form/podTemplate/WorkspaceKindFormPodTemplate.tsx
index 7246a881..0055b477 100644
--- a/workspaces/frontend/src/app/pages/WorkspaceKinds/Form/podTemplate/WorkspaceKindFormPodTemplate.tsx
+++ b/workspaces/frontend/src/app/pages/WorkspaceKinds/Form/podTemplate/WorkspaceKindFormPodTemplate.tsx
@@ -53,144 +53,142 @@ export const WorkspaceKindFormPodTemplate: React.FC<WorkspaceKindFormPodTemplate
   );
 
   return (
-    <div className="pf-u-mb-0">
-      <ExpandableSection
-        toggleText="Pod Lifecycle & Customization"
-        onToggle={() => setIsExpanded((prev) => !prev)}
-        isExpanded={isExpanded}
-        isIndented
-      >
-        <Form>
+    <ExpandableSection
+      toggleText="Pod Lifecycle & Customization"
+      onToggle={() => setIsExpanded((prev) => !prev)}
+      isExpanded={isExpanded}
+      isIndented
+    >
+      <Form>
+        <FormFieldGroup
+          aria-label="Pod Metadata"
+          header={
+            <FormFieldGroupHeader
+              titleText={{
+                text: 'Pod Metadata',
+                id: 'workspace-kind-pod-metadata',
+              }}
+              titleDescription={
+                <HelperText>
+                  Edit mutable metadata of all pods created with this Workspace Kind.
+                </HelperText>
+              }
+            />
+          }
+        >
+          <EditableLabels
+            rows={Object.entries(podTemplate.podMetadata.labels).map((entry) => ({
+              key: entry[0],
+              value: entry[1],
+            }))}
+            setRows={(newLabels) => {
+              updatePodTemplate({
+                ...podTemplate,
+                podMetadata: {
+                  ...podTemplate.podMetadata,
+                  labels: newLabels.reduce((acc: { [k: string]: string }, { key, value }) => {
+                    acc[key] = value;
+                    return acc;
+                  }, {}),
+                },
+              });
+            }}
+          />
+          <EditableLabels
+            title="Annotations"
+            description="Use annotations to attach arbitrary non-identifying metadata to Kubernetes objects."
+            buttonLabel="Annotation"
+            rows={Object.entries(podTemplate.podMetadata.annotations).map((entry) => ({
+              key: entry[0],
+              value: entry[1],
+            }))}
+            setRows={(newAnnotations) => {
+              updatePodTemplate({
+                ...podTemplate,
+                podMetadata: {
+                  ...podTemplate.podMetadata,
+                  annotations: newAnnotations.reduce(
+                    (acc: { [k: string]: string }, { key, value }) => {
+                      acc[key] = value;
+                      return acc;
+                    },
+                    {},
+                  ),
+                },
+              });
+            }}
+          />
+        </FormFieldGroup>
+        {/* podTemplate.culling is currently not developed in the backend */}
+        {podTemplate.culling && (
           <FormFieldGroup
-            aria-label="Pod Metadata"
+            aria-label="Pod Culling"
             header={
               <FormFieldGroupHeader
                 titleText={{
-                  text: 'Pod Metadata',
-                  id: 'workspace-kind-pod-metadata',
+                  text: 'Pod Culling',
+                  id: 'workspace-kind-pod-culling',
                 }}
                 titleDescription={
                   <HelperText>
-                    Edit mutable metadata of all pods created with this Workspace Kind.
+                    <HelperTextItem variant="warning">
+                      Warning: Only for JupyterLab deployments
+                    </HelperTextItem>
+                    Culling scales the number of pods in a Workspace to zero based on its last
+                    activity by polling Jupyter&apos;s status endpoint.
                   </HelperText>
                 }
               />
             }
           >
-            <EditableLabels
-              rows={Object.entries(podTemplate.podMetadata.labels).map((entry) => ({
-                key: entry[0],
-                value: entry[1],
-              }))}
-              setRows={(newLabels) => {
-                updatePodTemplate({
-                  ...podTemplate,
-                  podMetadata: {
-                    ...podTemplate.podMetadata,
-                    labels: newLabels.reduce((acc: { [k: string]: string }, { key, value }) => {
-                      acc[key] = value;
-                      return acc;
-                    }, {}),
-                  },
-                });
-              }}
-            />
-            <EditableLabels
-              title="Annotations"
-              description="Use annotations to attach arbitrary non-identifying metadata to Kubernetes objects."
-              buttonLabel="Annotation"
-              rows={Object.entries(podTemplate.podMetadata.annotations).map((entry) => ({
-                key: entry[0],
-                value: entry[1],
-              }))}
-              setRows={(newAnnotations) => {
-                updatePodTemplate({
-                  ...podTemplate,
-                  podMetadata: {
-                    ...podTemplate.podMetadata,
-                    annotations: newAnnotations.reduce(
-                      (acc: { [k: string]: string }, { key, value }) => {
-                        acc[key] = value;
-                        return acc;
-                      },
-                      {},
-                    ),
-                  },
-                });
-              }}
-            />
-          </FormFieldGroup>
-          {/* podTemplate.culling is currently not developed in the backend */}
-          {podTemplate.culling && (
-            <FormFieldGroup
-              aria-label="Pod Culling"
-              header={
-                <FormFieldGroupHeader
-                  titleText={{
-                    text: 'Pod Culling',
-                    id: 'workspace-kind-pod-culling',
-                  }}
-                  titleDescription={
-                    <HelperText>
-                      <HelperTextItem variant="warning">
-                        Warning: Only for JupyterLab deployments
-                      </HelperTextItem>
-                      Culling scales the number of pods in a Workspace to zero based on its last
-                      activity by polling Jupyter&apos;s status endpoint.
-                    </HelperText>
-                  }
-                />
-              }
-            >
-              <FormGroup>
-                <Switch
-                  isChecked={podTemplate.culling.enabled || false}
-                  label="Enabled"
-                  aria-label="pod template enable culling controlled check"
-                  onChange={(_, checked) => toggleCullingEnabled(checked)}
-                  id="workspace-kind-pod-template-culling-enabled"
-                  name="culling-enabled"
-                />
-              </FormGroup>
-              <FormGroup label="Max Inactive Period">
-                <ResourceInputWrapper
-                  value={String(podTemplate.culling.maxInactiveSeconds || 86400)}
-                  type="time"
-                  onChange={(value) =>
-                    podTemplate.culling &&
-                    updatePodTemplate({
-                      ...podTemplate,
-                      culling: {
-                        ...podTemplate.culling,
-                        maxInactiveSeconds: Number(value),
-                      },
-                    })
-                  }
-                  step={1}
-                  aria-label="max inactive period input"
-                  isDisabled={!podTemplate.culling.enabled}
-                />
-              </FormGroup>
-            </FormFieldGroup>
-          )}
-          <FormFieldGroup
-            aria-label="Additional Volumes"
-            header={
-              <FormFieldGroupHeader
-                titleText={{
-                  text: 'Additional Volumes',
-                  id: 'workspace-kind-extra-volume',
-                }}
-                titleDescription={
-                  <HelperText>Configure the paths to mount additional PVCs.</HelperText>
+            <FormGroup>
+              <Switch
+                isChecked={podTemplate.culling.enabled || false}
+                label="Enabled"
+                aria-label="pod template enable culling controlled check"
+                onChange={(_, checked) => toggleCullingEnabled(checked)}
+                id="workspace-kind-pod-template-culling-enabled"
+                name="culling-enabled"
+              />
+            </FormGroup>
+            <FormGroup label="Max Inactive Period">
+              <ResourceInputWrapper
+                value={String(podTemplate.culling.maxInactiveSeconds || 86400)}
+                type="time"
+                onChange={(value) =>
+                  podTemplate.culling &&
+                  updatePodTemplate({
+                    ...podTemplate,
+                    culling: {
+                      ...podTemplate.culling,
+                      maxInactiveSeconds: Number(value),
+                    },
+                  })
                 }
+                step={1}
+                aria-label="max inactive period input"
+                isDisabled={!podTemplate.culling.enabled}
               />
-            }
-          >
-            <WorkspaceFormPropertiesVolumes volumes={volumes} setVolumes={handleVolumes} />
+            </FormGroup>
           </FormFieldGroup>
-        </Form>
-      </ExpandableSection>
-    </div>
+        )}
+        <FormFieldGroup
+          aria-label="Additional Volumes"
+          header={
+            <FormFieldGroupHeader
+              titleText={{
+                text: 'Additional Volumes',
+                id: 'workspace-kind-extra-volume',
+              }}
+              titleDescription={
+                <HelperText>Configure the paths to mount additional PVCs.</HelperText>
+              }
+            />
+          }
+        >
+          <WorkspaceFormPropertiesVolumes volumes={volumes} setVolumes={handleVolumes} />
+        </FormFieldGroup>
+      </Form>
+    </ExpandableSection>
   );
 };
diff --git a/workspaces/frontend/src/app/pages/WorkspaceKinds/Form/properties/WorkspaceKindFormProperties.tsx b/workspaces/frontend/src/app/pages/WorkspaceKinds/Form/properties/WorkspaceKindFormProperties.tsx
index 4aafe35e..4b5b13a1 100644
--- a/workspaces/frontend/src/app/pages/WorkspaceKinds/Form/properties/WorkspaceKindFormProperties.tsx
+++ b/workspaces/frontend/src/app/pages/WorkspaceKinds/Form/properties/WorkspaceKindFormProperties.tsx
@@ -21,108 +21,104 @@ export const WorkspaceKindFormProperties: React.FC<WorkspaceKindFormPropertiesPr
   const [isExpanded, setIsExpanded] = useState(false);
   return (
     <Content>
-      <div className="pf-u-mb-0">
-        <ExpandableSection
-          toggleText="Properties"
-          onToggle={() => setIsExpanded((prev) => !prev)}
-          isExpanded={isExpanded}
-          isIndented
-        >
-          <Form>
-            <FormGroup label="Workspace Kind Name" isRequired fieldId="workspace-kind-name">
-              <TextInput
-                isRequired
-                type="text"
-                value={properties.displayName}
-                onChange={(_, value) => updateField({ ...properties, displayName: value })}
-                id="workspace-kind-name"
-              />
-            </FormGroup>
-            <FormGroup label="Description" fieldId="workspace-kind-description">
-              <TextInput
-                type="text"
-                value={properties.description}
-                onChange={(_, value) => updateField({ ...properties, description: value })}
-                id="workspace-kind-description"
-              />
-            </FormGroup>
-            {mode === 'edit' && (
-              <FormGroup
-                style={{ marginTop: 'var(--mui-spacing-16px)' }}
-                fieldId="workspace-kind-deprecated"
-              >
-                <Switch
-                  aria-label="workspace-kind-deprecated"
-                  isChecked={properties.deprecated}
-                  label={
-                    <div>
-                      <div>Deprecated</div>
-                      <HelperText>
-                        Flag this workspace kind as deprecated and optionally set a deprecation
-                        message
-                      </HelperText>
-                    </div>
-                  }
-                  onChange={() =>
-                    updateField({ ...properties, deprecated: !properties.deprecated })
-                  }
-                  id="workspace-kind-deprecated"
-                  name="workspace-kind-deprecated-switch"
-                />
-              </FormGroup>
-            )}
-            {mode === 'edit' && properties.deprecated && (
-              <FormGroup>
-                <TextInput
-                  isDisabled={!properties.deprecated}
-                  type="text"
-                  label="Deprecation message"
-                  value={properties.deprecationMessage}
-                  placeholder="Deprecation message"
-                  onChange={(_, value) => updateField({ ...properties, deprecationMessage: value })}
-                  id="workspace-kind-deprecated-msg"
-                />
-              </FormGroup>
-            )}
+      <ExpandableSection
+        toggleText="Properties"
+        onToggle={() => setIsExpanded((prev) => !prev)}
+        isExpanded={isExpanded}
+        isIndented
+      >
+        <Form>
+          <FormGroup label="Workspace Kind Name" isRequired fieldId="workspace-kind-name">
+            <TextInput
+              isRequired
+              type="text"
+              value={properties.displayName}
+              onChange={(_, value) => updateField({ ...properties, displayName: value })}
+              id="workspace-kind-name"
+            />
+          </FormGroup>
+          <FormGroup label="Description" fieldId="workspace-kind-description">
+            <TextInput
+              type="text"
+              value={properties.description}
+              onChange={(_, value) => updateField({ ...properties, description: value })}
+              id="workspace-kind-description"
+            />
+          </FormGroup>
+          {mode === 'edit' && (
             <FormGroup
-              fieldId="workspace-kind-hidden"
               style={{ marginTop: 'var(--mui-spacing-16px)' }}
+              fieldId="workspace-kind-deprecated"
             >
               <Switch
-                isChecked={properties.hidden}
-                onChange={() => updateField({ ...properties, hidden: !properties.hidden })}
-                id="workspace-kind-hidden"
-                name="workspace-kind-hidden-switch"
-                aria-label="workspace-kind-hidden"
+                aria-label="workspace-kind-deprecated"
+                isChecked={properties.deprecated}
                 label={
                   <div>
-                    <div>Hidden</div>
-                    <HelperText>Hide this workspace kind from users</HelperText>
+                    <div>Deprecated</div>
+                    <HelperText>
+                      Flag this workspace kind as deprecated and optionally set a deprecation
+                      message
+                    </HelperText>
                   </div>
                 }
+                onChange={() => updateField({ ...properties, deprecated: !properties.deprecated })}
+                id="workspace-kind-deprecated"
+                name="workspace-kind-deprecated-switch"
               />
             </FormGroup>
-            <FormGroup label="Icon URL" isRequired fieldId="workspace-kind-icon">
-              <TextInput
-                isRequired
-                type="text"
-                value={properties.icon.url}
-                onChange={(_, value) => updateField({ ...properties, icon: { url: value } })}
-                id="workspace-kind-icon"
-              />
-            </FormGroup>
-            <FormGroup label="Logo URL" isRequired fieldId="workspace-kind-logo">
+          )}
+          {mode === 'edit' && properties.deprecated && (
+            <FormGroup>
               <TextInput
-                isRequired
+                isDisabled={!properties.deprecated}
                 type="text"
-                value={properties.logo.url}
-                onChange={(_, value) => updateField({ ...properties, logo: { url: value } })}
-                id="workspace-kind-logo"
+                label="Deprecation message"
+                value={properties.deprecationMessage}
+                placeholder="Deprecation message"
+                onChange={(_, value) => updateField({ ...properties, deprecationMessage: value })}
+                id="workspace-kind-deprecated-msg"
               />
             </FormGroup>
-          </Form>
-        </ExpandableSection>
-      </div>
+          )}
+          <FormGroup
+            fieldId="workspace-kind-hidden"
+            style={{ marginTop: 'var(--mui-spacing-16px)' }}
+          >
+            <Switch
+              isChecked={properties.hidden}
+              onChange={() => updateField({ ...properties, hidden: !properties.hidden })}
+              id="workspace-kind-hidden"
+              name="workspace-kind-hidden-switch"
+              aria-label="workspace-kind-hidden"
+              label={
+                <div>
+                  <div>Hidden</div>
+                  <HelperText>Hide this workspace kind from users</HelperText>
+                </div>
+              }
+            />
+          </FormGroup>
+          <FormGroup label="Icon URL" isRequired fieldId="workspace-kind-icon">
+            <TextInput
+              isRequired
+              type="text"
+              value={properties.icon.url}
+              onChange={(_, value) => updateField({ ...properties, icon: { url: value } })}
+              id="workspace-kind-icon"
+            />
+          </FormGroup>
+          <FormGroup label="Logo URL" isRequired fieldId="workspace-kind-logo">
+            <TextInput
+              isRequired
+              type="text"
+              value={properties.logo.url}
+              onChange={(_, value) => updateField({ ...properties, logo: { url: value } })}
+              id="workspace-kind-logo"
+            />
+          </FormGroup>
+        </Form>
+      </ExpandableSection>
     </Content>
   );
 };
diff --git a/workspaces/frontend/src/app/pages/Workspaces/Form/WorkspaceForm.tsx b/workspaces/frontend/src/app/pages/Workspaces/Form/WorkspaceForm.tsx
index 3219c3d8..7e279e5c 100644
--- a/workspaces/frontend/src/app/pages/Workspaces/Form/WorkspaceForm.tsx
+++ b/workspaces/frontend/src/app/pages/Workspaces/Form/WorkspaceForm.tsx
@@ -410,7 +410,7 @@ const WorkspaceForm: React.FC = () => {
                     )}
                   </FlexItem>
                   <FlexItem>
-                    <Button variant="link" isInline onClick={cancel}>
+                    <Button variant="link" onClick={cancel}>
                       Cancel
                     </Button>
                   </FlexItem>