🪟 🎨 Increases GroupTitle followed divs width from 180px to 250px (#13956

)

* Increases GroupControls followed divs width from 180px to 250px

* Increases min-width for GroupTitle

* Change layout to flexbox

Co-authored-by: Tim Roes <tim@airbyte.io>

airbyte-webapp/src/components/GroupControls/GroupControls.tsx

@@ -3,17 +3,13 @@ import styled from "styled-components";
 
 import { Label, TextWithHTML } from "components";
 
-const GroupTitle = styled.div`
+const GroupTitle = styled.div<{ $fullWidthTitle: boolean }>`
   margin-top: -23px;
   background: ${({ theme }) => theme.whiteColor};
   padding: 0 5px;
   display: inline-block;
   vertical-align: middle;
-
-  & > div {
-    min-width: 180px;
-    display: inline-block;
-  }
+  width: ${({ $fullWidthTitle }) => ($fullWidthTitle ? "100%" : "auto")};
 `;
 
 const FormGroup = styled.div`
@@ -28,12 +24,19 @@ interface GroupControlsProps {
   title: React.ReactNode;
   description?: string;
   name?: string;
+  fullWidthTitle?: boolean;
 }
 
-const GroupControls: React.FC<GroupControlsProps> = ({ title, description, children, name }) => {
+const GroupControls: React.FC<GroupControlsProps> = ({
+  title,
+  description,
+  children,
+  name,
+  fullWidthTitle = false,
+}) => {
   return (
     <FormGroup data-testid={name}>
-      <GroupTitle>{title}</GroupTitle>
+      <GroupTitle $fullWidthTitle={fullWidthTitle}>{title}</GroupTitle>
       {description && <Label message={<TextWithHTML text={description} />} />}
       {children}
     </FormGroup>

airbyte-webapp/src/views/Connector/ServiceForm/components/Sections/ConditionSection.module.scss

@@ -0,0 +1,7 @@
+.sectionTitle {
+  display: flex;
+}
+
+.sectionTitleDropdown {
+  flex: 1 1 auto;
+}

airbyte-webapp/src/views/Connector/ServiceForm/components/Sections/ConditionSection.tsx

@@ -11,6 +11,7 @@ import { isDefined } from "utils/common";
 
 import { useServiceForm } from "../../serviceFormContext";
 import { ServiceFormValues } from "../../types";
+import styles from "./ConditionSection.module.scss";
 import { FormSection } from "./FormSection";
 
 const GroupLabel = styled(Label)`
@@ -78,17 +79,19 @@ export const ConditionSection: React.FC<ConditionSectionProps> = ({ formField, p
     <GroupControls
       key={`form-field-group-${formField.fieldKey}`}
       description={formField.description}
+      fullWidthTitle
       title={
-        <>
+        <div className={styles.sectionTitle}>
           {label ? <GroupLabel>{label}:</GroupLabel> : null}
           <DropDown
+            className={styles.sectionTitleDropdown}
             options={options}
             onChange={onOptionChange}
             value={currentlySelectedCondition}
             name={formField.path}
             isDisabled={disabled}
           />
-        </>
+        </div>
       }
     >
       <ConditionControls>