Merge pull request #997 from topcoder-platform/PM-579-copilot-form

PM-579 Make buttons in form responsive

Author: himaniraghav3

src/apps/copilots/src/pages/copilot-request-form/index.tsx

@@ -303,6 +303,7 @@ const CopilotRequestForm: FC<{}> = () => {
                             customRadius
                             noCaps
                             leftAlignText
+                            textWrap
                         />
                         <Button
                             secondary
@@ -316,6 +317,7 @@ const CopilotRequestForm: FC<{}> = () => {
                             customRadius
                             noCaps
                             leftAlignText
+                            textWrap
                         />
                         <Button
                             secondary
@@ -329,6 +331,7 @@ const CopilotRequestForm: FC<{}> = () => {
                             customRadius
                             noCaps
                             leftAlignText
+                            textWrap
                         />
                         {formErrors.complexity && (
                             <p className={styles.error}>

src/libs/ui/lib/components/button/base-button/BaseButton.module.scss

@@ -60,6 +60,12 @@ $btn-secondary-border-width: $border;
         justify-content: left;
     }
 
+    &:global(.btn-text-wrap) {
+        white-space: normal;
+        word-wrap: break-word;
+        text-align: left;
+    }
+
     // Define variants
     &:global(.btn-variant-danger) {
         --btn-variant: #{$red-120};

src/libs/ui/lib/components/button/base-button/BaseButton.tsx

@@ -27,6 +27,7 @@ export interface BaseButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>
     customRadius?: boolean
     noCaps?: boolean
     leftAlignText?: boolean
+    textWrap?: boolean
 }
 
 const BaseButton: FC<BaseButtonProps> = props => {
@@ -47,6 +48,7 @@ const BaseButton: FC<BaseButtonProps> = props => {
         'btn-style-primary': props.primary,
         'btn-style-secondary': props.secondary,
         [`btn-variant-${props.variant}`]: !!props.variant,
+        'btn-text-wrap': props.textWrap,
     })
 
     return (