fix: updating style for avoid wrapping

src/renderer/src/components/steps/ConfigureApplication.jsx

@@ -76,14 +76,14 @@ const ConfigureApplication = React.forwardRef(({ onNext, onBack }, ref) => {
   return (
     <div className={styles.container} ref={ref}>
       <div className={`${commonStyles.largeFlexBlock} ${commonStyles.fullWidth}`}>
-        <div className={`${commonStyles.mediumFlexBlock} ${commonStyles.halfWidth}`}>
+        <div className={`${commonStyles.mediumFlexBlock} ${commonStyles.fullWidth}`}>
           <Title
             title={formData.createApplication.application}
             iconName='AppIcon'
             dataAttrName='cy'
             dataAttrValue='step-title'
           />
-          <p className={`${typographyStyles.desktopBodyLarge} ${typographyStyles.textWhite} ${typographyStyles.opacity70}`}>Select a template and plugins for your service from our Stackables Marketplace. Once you have chosen a template you can add another Service.</p>
+          <p className={`${typographyStyles.desktopBodyLarge} ${typographyStyles.textWhite} ${typographyStyles.opacity70}`}>Select a template and plugins for your service from our Stackables Marketplace.<br />Once you have chosen a template you can add another Service.</p>
         </div>
         <div className={`${styles.customFlexBlock} ${commonStyles.halfWidth}`}>
           <Forms.Field

src/renderer/src/components/steps/GeneratingApplication.jsx

@@ -86,7 +86,7 @@ const GeneratingApplication = React.forwardRef(({ onRestartProcess }, ref) => {
           dataAttrValue='step-title'
         />
         <p className={`${typographyStyles.desktopBodyLarge} ${typographyStyles.textWhite} ${typographyStyles.opacity70}`}>
-          We are generating your app. Once all the steps are done you will be able to complete and use your new application.
+          We are generating your app. <br />Once all the steps are done you will be able to complete and use your new application.
         </p>
       </div>
       <BorderedBox classes={`${commonStyles.fullWidth} ${styles.content}`} backgroundColor={TRANSPARENT} borderColorOpacity={OPACITY_30} color={WHITE}>

src/renderer/src/components/steps/PrepareFolder.jsx

@@ -80,15 +80,15 @@ const PrepareFolder = React.forwardRef(({ onNext, onBack }, ref) => {
   return (
     <div className={styles.container} ref={ref}>
       <div className={commonStyles.largeFlexBlock}>
-        <div className={`${commonStyles.mediumFlexBlock} ${commonStyles.halfWidth}`}>
+        <div className={`${commonStyles.mediumFlexBlock} ${commonStyles.fullWidth}`}>
           <Title
             title={formData.createApplication.application}
             iconName='AppIcon'
             dataAttrName='cy'
             dataAttrValue='step-title'
           />
           <p className={`${typographyStyles.desktopBodyLarge} ${typographyStyles.textWhite} ${typographyStyles.opacity70}`}>
-            We are preparing your folder. Once all the steps are done you will be able to configure your services.
+            We are preparing your folder.<br /> Once all the steps are done you will be able to configure your services.
           </p>
         </div>
         <BorderedBox classes={`${commonStyles.fullWidth} ${styles.content}`} backgroundColor={TRANSPARENT} borderColorOpacity={OPACITY_30} color={WHITE}>

src/renderer/src/components/steps/compose-application/ComposeApplication.jsx

@@ -154,15 +154,15 @@ const ComposeApplication = React.forwardRef(({ onNext, onBack }, ref) => {
   return (
     <div className={styles.container} ref={ref}>
       <div className={`${commonStyles.largeFlexBlock}`}>
-        <div className={`${commonStyles.mediumFlexBlock} ${commonStyles.halfWidth}`}>
+        <div className={`${commonStyles.mediumFlexBlock} ${commonStyles.fullWidth}`}>
           <EditableTitle
             title={formData.createApplication.application}
             iconName='AppIcon'
             onClickSubmit={(name) => handleEditApplicationName(name)}
             dataAttrName='cy'
             dataAttrValue='step-title'
           />
-          <p className={`${typographyStyles.desktopBodyLarge} ${typographyStyles.textWhite} ${typographyStyles.opacity70}`}>Select a template and plugins for your service from our Stackables Marketplace. Once you have chosen a template you can add another Service.</p>
+          <p className={`${typographyStyles.desktopBodyLarge} ${typographyStyles.textWhite} ${typographyStyles.opacity70}`}>Select a template and plugins for your service from our Stackables Marketplace. <br />Once you have chosen a template you can add another Service.</p>
         </div>
         <div className={`${commonStyles.mediumFlexRow} ${commonStyles.fullWidth} ${commonStyles.justifyBetween} ${commonStyles.itemsCenter}`}>
           <div className={`${commonStyles.flexBlockNoGap}`}>

src/renderer/src/components/steps/configure-services/ConfigureServices.jsx

@@ -115,14 +115,14 @@ const ConfigureServices = React.forwardRef(({ onNext, onBack }, ref) => {
   return (
     <div className={styles.container} ref={ref}>
       <div className={commonStyles.largeFlexBlock}>
-        <div className={`${commonStyles.mediumFlexBlock} ${commonStyles.halfWidth}`}>
+        <div className={`${commonStyles.mediumFlexBlock} ${commonStyles.fullWidth}`}>
           <Title
             title={formData.createApplication.application}
             iconName='AppIcon'
             dataAttrName='cy'
             dataAttrValue='step-title'
           />
-          <p className={`${typographyStyles.desktopBodyLarge} ${typographyStyles.textWhite} ${typographyStyles.opacity70}`}>Select a template and plugins for your service from our Stackables Marketplace. Once you have chosen a template you can add another Service.</p>
+          <p className={`${typographyStyles.desktopBodyLarge} ${typographyStyles.textWhite} ${typographyStyles.opacity70}`}>Select a template and plugins for your service from our Stackables Marketplace. <br />Once you have chosen a template you can add another Service.</p>
         </div>
         <div className={`${commonStyles.mediumFlexBlock} ${commonStyles.fullWidth} ${styles.content}`}>
           <ConfigureEnvVarsTemplateAndPlugins

src/renderer/src/components/templates/TemplateEnvVarsForm.jsx

@@ -12,12 +12,20 @@ function TemplateEnvVarsForm ({
   templateName,
   serviceName
 }) {
-  const configuredServiceFound = configuredServices.find(configuredService => configuredService.template === templateName && configuredService.name === serviceName)
+  const configuredServiceFound = configuredServices.find(configuredService => configuredService.template === templateName && configuredService.name === serviceName) || {}
 
-  function renderForm () {
+  function renderFormContainer () {
     if (Object.keys(configuredServiceFound.form).length === 0) {
       return <></>
     }
+    return (
+      <div className={`${commonStyles.mediumFlexBlock} ${commonStyles.fullWidth}`}>
+        {renderForm()}
+      </div>
+    )
+  }
+
+  function renderForm () {
     return Object.keys(configuredServiceFound.form).map((element) => (
       <Forms.Field
         title={configuredServiceFound.form[element].label}
@@ -56,9 +64,7 @@ function TemplateEnvVarsForm ({
       classes={`${commonStyles.mediumFlexBlock} ${commonStyles.fullWidth}`}
     >
       <p className={`${typographyStyles.desktopBody} ${typographyStyles.textWhite}`}>{templateName} {renderVariablesText()}</p>
-      <div className={`${commonStyles.mediumFlexBlock} ${commonStyles.fullWidth}`}>
-        {configuredServiceFound && renderForm()}
-      </div>
+      {configuredServiceFound && renderFormContainer()}
     </BorderedBox>
   )
 }