style: make the resources form responsive (#276)

Author: Annysah

packages/cms/form/belongs-to-many/belongs-to-many.tsx

@@ -61,13 +61,21 @@ const AddButtonsWrapper = styled.div`
   display: flex;
   align-items: center;
   gap: 4px;
+
+  @media only screen and (max-width: 767px) {
+    display: block;
+  }
 `
 
 const CreateActionButtonsWrapper = styled.div`
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
+
+  @media only screen and (max-width: 767px) {
+    display: block;
+  }
 `
 
 const CreateResourceWrapper = styled.div`

packages/cms/pages/components/dashboard/layout/topbar.tsx

@@ -11,7 +11,9 @@ const Topbar = styled.div`
   align-items: center;
   border-bottom: ${({ theme }) => theme.border.thin};
   @media screen and (max-width: 450px) {
-    padding: 17px 10px;
+    flex-direction: column;
+    height: 140px;
+    padding: 17px 5px;
   }
 `
 

packages/cms/pages/resources/resource-form/field-group.tsx

@@ -9,6 +9,10 @@ const FieldGroupWrapper = styled.div<{
   transition: all 0.25s ease-in-out;
   border-left: ${({ theme, focused }) =>
     `3px solid ${focused ? theme.colors.primary : theme.border.color}`};
+
+  @media only screen and (max-width: 767px) {
+    padding-left: 5px; 
+  }
 `
 
 interface FieldGroupProps {

packages/cms/pages/resources/resource-form/resource-form.tsx

@@ -49,6 +49,10 @@ const SidebarCollapseExpandIcon = styled.button<{ close: boolean }>`
   left: ${({ close }) => (close ? '-60px' : '-14px')};
   z-index: 99;
   background-color: ${({ theme }) => theme.colors.ghost};
+
+  @media only screen and (max-width: 767px) {
+    top: 5px;
+  }
 `
 
 const Title = styled.button`
@@ -201,24 +205,45 @@ const PublishAndSaveToDraftContainer = styled.div`
   gap: 0.75rem;
   display: flex;
   align-items: center;
+
+  @media only screen and (max-width: 450px) {
+    width: 100%;
+    justify-content: space-evenly;
+  }
 `
 const TitleAndBackButtonContainer = styled.div`
   gap: 0.75rem;
   display: flex;
   align-items: center;
+
+  @media only screen and (max-width: 450px) {
+    width: 100%;
+    justify-content: space-around;
+    margin-right: 30px;
+  }
 `
 const PageWrapper = styled.div`
   width: 100%;
   height: 100%;
   overflow-y: auto;
   padding: 40px;
+
+  @media screen and (max-width: 450px) {
+    overflow-x: hidden;
+  }
 `
 const PageContent = styled.div`
   // width: 50%;
   width: 650px;
   margin: 0px auto;
 `
 
+const ResourceTitle = styled(EuiTitle)`
+  @media screen and (max-width: 450px) {
+    font-size: 14px;
+  }
+`
+
 export function resolveDefaultFormValues(
   resource: ResourceContract,
   data: AbstractData,
@@ -358,11 +383,11 @@ export const ResourceFormView: React.FunctionComponent<{
           >
             Back
           </EuiButtonEmpty>
-          <EuiTitle size="xs">
+          <ResourceTitle size="xs">
             <h3>
               {isEditing ? 'Edit' : 'Create'} {resource?.name?.toLowerCase()}
             </h3>
-          </EuiTitle>
+          </ResourceTitle>
         </TitleAndBackButtonContainer>
         <PublishAndSaveToDraftContainer>
           <EuiButton fill>Save as draft</EuiButton>
@@ -457,6 +482,12 @@ export function useCreateResourceForm({
   }
 }
 
+const ResourceFormRow = styled(EuiFormRow)`
+  @media only screen and (max-width: 767px) {
+    width: 70vw;
+  }
+`
+
 export const ResourceForm: React.FunctionComponent<{
   isEditing?: boolean
   createResourceForm: ReturnType<typeof useCreateResourceForm>
@@ -511,7 +542,7 @@ export const ResourceForm: React.FunctionComponent<{
             key={field.inputName}
             focused={activeField?.inputName === field.inputName}
           >
-            <EuiFormRow
+            <ResourceFormRow
               fullWidth
               label={field.label || field.name}
               helpText={field.description}
@@ -539,7 +570,7 @@ export const ResourceForm: React.FunctionComponent<{
                   setValue(field.inputName, value)
                 }}
               />
-            </EuiFormRow>
+            </ResourceFormRow>
           </FieldGroup>
         )
       })}