feat(Branding): Adjust the brand image display to `object-fit-contain`

ui/src/components/BrandUpload/index.tsx

@@ -1,6 +1,8 @@
 import { FC } from 'react';
 import { ButtonGroup, Button } from 'react-bootstrap';
 
+import classNames from 'classnames';
+
 import { Icon, UploadImg } from '@/components';
 import { UploadType } from '@/common/interface';
 
@@ -10,6 +12,7 @@ interface Props {
   onChange: (value: string) => void;
   acceptType?: string;
   readOnly?: boolean;
+  imgClassNames?: classNames.Argument;
 }
 
 const Index: FC<Props> = ({
@@ -18,6 +21,7 @@ const Index: FC<Props> = ({
   onChange,
   acceptType,
   readOnly = false,
+  imgClassNames = '',
 }) => {
   const onUpload = (imgPath: string) => {
     onChange(imgPath);
@@ -29,7 +33,13 @@ const Index: FC<Props> = ({
   return (
     <div className="d-flex">
       <div className="bg-gray-300 upload-img-wrap me-2 d-flex align-items-center justify-content-center">
-        <img src={value} alt="" height={100} />
+        <img
+          className={classNames(imgClassNames)}
+          src={value}
+          alt=""
+          height="100%"
+          width="100%"
+        />
       </div>
       <ButtonGroup vertical className="fit-content">
         <UploadImg

ui/src/components/SchemaForm/components/Upload.tsx

@@ -1,6 +1,8 @@
 import React, { FC } from 'react';
 import { Form } from 'react-bootstrap';
 
+import classNames from 'classnames';
+
 import type * as Type from '@/common/interface';
 import BrandUpload from '@/components/BrandUpload';
 
@@ -11,6 +13,7 @@ interface Props {
   onChange?: (fd: Type.FormDataType) => void;
   formData: Type.FormDataType;
   readOnly?: boolean;
+  imgClassNames?: classNames.Argument;
 }
 const Index: FC<Props> = ({
   type = 'avatar',
@@ -19,6 +22,7 @@ const Index: FC<Props> = ({
   onChange,
   formData,
   readOnly = false,
+  imgClassNames = '',
 }) => {
   const fieldObject = formData[fieldName];
   const handleChange = (name: string, value: string) => {
@@ -41,6 +45,7 @@ const Index: FC<Props> = ({
         value={fieldObject?.value}
         readOnly={readOnly}
         onChange={(value) => handleChange(fieldName, value)}
+        imgClassNames={imgClassNames}
       />
       <Form.Control
         name={fieldName}

ui/src/components/SchemaForm/index.tsx

@@ -314,6 +314,9 @@ const SchemaForm: ForwardRefRenderFunction<FormRef, FormProps> = (
                 onChange={onChange}
                 formData={formData}
                 readOnly={readOnly}
+                imgClassNames={
+                  uiOpt && 'className' in uiOpt ? uiOpt.className : ''
+                }
               />
             ) : null}
             {widget === 'textarea' ? (

ui/src/components/SchemaForm/types.ts

@@ -39,7 +39,7 @@ export interface BaseUIOptions {
   empty?: string;
   // Will be appended to the className of the form component itself
   className?: classnames.Argument;
-  // The className that will be attached to a form field container
+  // The className that will be attached to a **form field container**
   fieldClassName?: classnames.Argument;
   // Make a form component render into simplified mode
   readOnly?: boolean;

ui/src/components/SideNav/index.scss

@@ -6,7 +6,6 @@
     top: 62px;
     box-sizing: border-box;
     max-height: calc(100vh - 62px);
-    // max-height: calc(100% - 62px - 74px - 24px);
     overflow-y: auto;
     margin-bottom: 8px;
   }

ui/src/index.scss

@@ -177,9 +177,6 @@ a {
   display: inline-block;
 }
 
-.object-fit-contain {
-  object-fit: contain;
-}
 .fmt {
   width: 100%;
   h1 {

ui/src/pages/Admin/Branding/index.tsx

@@ -76,18 +76,21 @@ const Index: FC = () => {
       'ui:widget': 'upload',
       'ui:options': {
         imageType: uploadType,
+        className: 'object-fit-contain',
       },
     },
     mobile_logo: {
       'ui:widget': 'upload',
       'ui:options': {
         imageType: uploadType,
+        className: 'object-fit-contain',
       },
     },
     square_icon: {
       'ui:widget': 'upload',
       'ui:options': {
         imageType: uploadType,
+        className: 'object-fit-contain',
       },
     },
     favicon: {
@@ -95,6 +98,7 @@ const Index: FC = () => {
       'ui:options': {
         acceptType: ',image/x-icon,image/vnd.microsoft.icon',
         imageType: uploadType,
+        className: 'object-fit-contain',
       },
     },
   };