From f230108132af02e02b62d2d45c51574215d9e9f0 Mon Sep 17 00:00:00 2001
From: jpople <jeremy@ethyca.com>
Date: Wed, 26 Jul 2023 16:49:18 -0400
Subject: [PATCH] Adjust max width of system information form (#3864)

---
 CHANGELOG.md                                         |  1 +
 .../src/features/system/SystemInformationForm.tsx    | 12 +++---------
 .../privacy-declarations/PrivacyDeclarationStep.tsx  |  2 +-
 3 files changed, 5 insertions(+), 10 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 2ab7bc33e5..e7b61ee892 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -19,6 +19,7 @@ The types of changes are:
 
 ### Changed
 - Simplified the file structure for HTML DSR packages [#3848](https://github.com/ethyca/fides/pull/3848)
+- Changed max width of form components in "system information" form tab [#3864](https://github.com/ethyca/fides/pull/3864)
 
 ## [2.17.0](https://github.com/ethyca/fides/compare/2.16.0...2.17.0)
 
diff --git a/clients/admin-ui/src/features/system/SystemInformationForm.tsx b/clients/admin-ui/src/features/system/SystemInformationForm.tsx
index 62386aa5f6..2f9d2eef63 100644
--- a/clients/admin-ui/src/features/system/SystemInformationForm.tsx
+++ b/clients/admin-ui/src/features/system/SystemInformationForm.tsx
@@ -152,10 +152,10 @@ const SystemInformationForm = ({
     >
       {({ dirty, values, isValid }) => (
         <Form>
-          <Stack spacing={6}>
+          <Stack spacing={6} maxWidth={{ base: "100%", lg: "70%" }}>
             {withHeader ? <SystemHeading system={passedInSystem} /> : null}
 
-            <Text fontSize="sm">
+            <Text fontSize="sm" fontWeight="medium">
               By providing a small amount of additional context for each system
               we can make reporting and understanding our tech stack much easier
               for everyone from engineering to legal teams. So let’s do this
@@ -165,13 +165,7 @@ const SystemInformationForm = ({
               System details
             </Heading>
             <Stack spacing={4}>
-              {/* While we support both designs of extra form items existing, change the width only 
-              when there are extra form items. When we move to only supporting one design, 
-              the parent container should control the width */}
-              <Stack
-                spacing={4}
-                maxWidth={!abridged ? { base: "100%", lg: "50%" } : undefined}
-              >
+              <Stack spacing={4}>
                 <CustomTextInput
                   id="name"
                   name="name"
diff --git a/clients/admin-ui/src/features/system/privacy-declarations/PrivacyDeclarationStep.tsx b/clients/admin-ui/src/features/system/privacy-declarations/PrivacyDeclarationStep.tsx
index 2d76999a67..2c8fec50f6 100644
--- a/clients/admin-ui/src/features/system/privacy-declarations/PrivacyDeclarationStep.tsx
+++ b/clients/admin-ui/src/features/system/privacy-declarations/PrivacyDeclarationStep.tsx
@@ -38,7 +38,7 @@ const PrivacyDeclarationStep = ({ system }: Props) => {
       <Heading as="h3" size="md">
         Data uses
       </Heading>
-      <Text fontSize="sm">
+      <Text fontSize="sm" fontWeight="medium">
         Data Uses describe the business purpose for which the personal data is
         processed or collected. Within a Data Use, you assign which categories
         of personal information are collected for this purpose and for which