(fix) O3-4410: Adjust Form Workspace Size & Enhance Form UI

src/components/inputs/file/file.scss

@@ -1,3 +1,5 @@
+@use '@carbon/layout';
+
 .label {
   font-family: IBM Plex Sans;
   font-size: 14px;
@@ -28,10 +30,8 @@
   display: flex;
   align-items: center;
   margin-bottom: 1rem;
-}
-
-.selectorButton {
-  margin-right: 1rem;
+  flex-wrap: wrap;
+  gap: layout.$spacing-05;
 }
 
 .caption {

src/components/renderer/page/page.renderer.scss

@@ -1,5 +1,6 @@
 @use '@carbon/colors';
 @use '@carbon/type';
+@use '@carbon/layout';
 
 .pageContent:last-child > hr {
   display: none;
@@ -39,6 +40,10 @@
   background-color: colors.$gray-10;
 }
 
+.sectionContainer :global(.cds--accordion__content) {
+  padding-right: layout.$spacing-05;
+}
+
 .accordionContainer {
   width: 95%;
 }

src/components/sidebar/sidebar.component.tsx

@@ -1,7 +1,8 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import classNames from 'classnames';
 import { useTranslation } from 'react-i18next';
 import { Button, InlineLoading } from '@carbon/react';
+import { useLayoutType } from '@openmrs/esm-framework';
 import { isPageContentVisible } from '../../utils/form-helper';
 import { useCurrentActivePage } from './useCurrentActivePage';
 import { usePageObserver } from './usePageObserver';
@@ -33,6 +34,11 @@ const Sidebar: React.FC<SidebarProps> = ({
     activePages,
     evaluatedPagesVisibility,
   });
+  const layout = useLayoutType();
+  const responsiveSize = useMemo(() => {
+    const isTablet = layout === 'tablet';
+    return isTablet ? 'lg' : 'sm';
+  }, [layout]);
 
   return (
     <div className={styles.sidebar}>
@@ -51,7 +57,7 @@ const Sidebar: React.FC<SidebarProps> = ({
 
       <div className={styles.sideNavActions}>
         {sessionMode !== 'view' && (
-          <Button className={styles.saveButton} disabled={isFormSubmitting} type="submit">
+          <Button className={styles.saveButton} disabled={isFormSubmitting} type="submit" size={responsiveSize}>
             {isFormSubmitting ? (
               <InlineLoading description={t('submitting', 'Submitting') + '...'} />
             ) : (
@@ -68,7 +74,8 @@ const Sidebar: React.FC<SidebarProps> = ({
             onCancel?.();
             handleClose?.();
             hideFormCollapseToggle();
-          }}>
+          }}
+          size={responsiveSize}>
           {sessionMode === 'view' ? t('close', 'Close') : t('cancel', 'Cancel')}
         </Button>
       </div>
@@ -86,12 +93,14 @@ interface PageLinkProps {
 function PageLink({ page, currentActivePage, pagesWithErrors, requestPage }: PageLinkProps) {
   const isActive = page.id === currentActivePage;
   const hasError = pagesWithErrors.includes(page.id);
+  const isTablet = useLayoutType() === 'tablet';
   return (
     <div
       className={classNames(styles.pageLink, {
         [styles.activePage]: isActive && !hasError,
         [styles.errorPage]: hasError && !isActive,
         [styles.activeErrorPage]: hasError && isActive,
+        [styles.pageLinkTablet]: isTablet,
       })}>
       <button
         onClick={(e) => {

src/components/sidebar/sidebar.scss

@@ -6,12 +6,16 @@
   border-left: 0.5rem solid colors.$teal-20;
   display: flex;
   align-items: center;
-  height: 3rem;
+  height: layout.$spacing-07;
   padding: 0.25rem 0.5rem;
   background-color: colors.$white;
   margin: 0 0 0.063rem;
 }
 
+.pageLinkTablet {
+  height: layout.$spacing-09;
+}
+
 .pageLink button {
   @include type.type-style('body-01');
   font-family: inherit;

src/form-engine.component.tsx

@@ -74,21 +74,23 @@ const FormEngine = ({
     return patient && workspaceSize === 'ultra-wide' && mode !== 'embedded-view';
   }, [patient, mode, workspaceSize]);
 
-  const showButtonSet = useMemo(() => {
+  const isFormWorkspaceTooNarrow = useMemo(() => ['narrow'].includes(workspaceSize), [workspaceSize]);
+
+  const showBottomButtonSet = useMemo(() => {
     if (mode === 'embedded-view' || isLoadingDependencies || hasMultiplePages === null) {
       return false;
     }
 
-    return ['narrow', 'wider'].includes(workspaceSize) || !hasMultiplePages;
-  }, [mode, workspaceSize, isLoadingDependencies, hasMultiplePages]);
+    return isFormWorkspaceTooNarrow || !hasMultiplePages;
+  }, [mode, isFormWorkspaceTooNarrow, isLoadingDependencies, hasMultiplePages]);
 
   const showSidebar = useMemo(() => {
     if (mode === 'embedded-view' || isLoadingDependencies || hasMultiplePages === null) {
       return false;
     }
 
-    return ['extra-wide', 'ultra-wide'].includes(workspaceSize) && hasMultiplePages;
-  }, [workspaceSize, isLoadingDependencies, hasMultiplePages]);
+    return !isFormWorkspaceTooNarrow && hasMultiplePages;
+  }, [isFormWorkspaceTooNarrow, isLoadingDependencies, hasMultiplePages]);
 
   useEffect(() => {
     reportError(formError, t('errorLoadingFormSchema', 'Error loading form schema'));
@@ -165,7 +167,7 @@ const FormEngine = ({
                     setIsLoadingFormDependencies={setIsLoadingDependencies}
                   />
                 </div>
-                {showButtonSet && (
+                {showBottomButtonSet && (
                   <ButtonSet className={styles.minifiedButtons}>
                     <Button
                       kind="secondary"