Adjust max width of system information form (#3864)

ethyca · Jul 26, 2023 · f230108 · f230108
1 parent 34d4e0d
commit f230108
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 10 deletions.
diff --git 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
@@ -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
@@ -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