@allsorter/ui-components 0.0.410 → 0.0.412

package/lib/responsive-layout/responsive-layout.component.d.ts

@@ -33,6 +33,7 @@ export declare class ResponsiveLayoutComponent {
     /** Minimum columns (e.g. 2) so this row never collapses to 1 column on small viewports. Use for "Date Type + Current Role/Study" row in certification/experience. */
     minColumns?: number;
     get hasMinCols2(): boolean;
+    get hasMinCols3(): boolean;
     get cssGap(): string;
     get cssCountMobile(): number;
     get cssCountMobileSm(): number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@allsorter/ui-components",
-  "version": "0.0.410",
+  "version": "0.0.412",
   "peerDependencies": {
     "@angular/common": "^18.0.0",
     "@angular/core": "^18.0.0",

package/src/lib/editable-form-wrapper/editable-form-wrapper.component.scss

@@ -90,6 +90,20 @@
   box-sizing: border-box;
   z-index: 0;
 
+  /* Ensure content doesn't overflow the form */
+  overflow: hidden;
+}
+
+/* Ensure all form inputs don't overflow their containers */
+:host ::ng-deep .al-form-wrapper>.inner > * {
+  max-width: 100%;
+  box-sizing: border-box;
+}
+
+/* Ensure app-flex-grid doesn't overflow */
+:host ::ng-deep .al-form-wrapper>.inner app-flex-grid {
+  max-width: 100%;
+  box-sizing: border-box;
 }
 
 /* Trim accidental extra spacing from first/last child margins inside content */
@@ -267,10 +281,11 @@ select.al-form__control {
   justify-content: center;
 }
 
-/* AL Form only: force 2 columns for the first row (Date Type + Current Study) when viewport or form is narrow.
+/* AL Form only: force 2 columns for the first row when viewport or form is narrow.
    Without this, app-flex-grid would collapse to 1 column; we keep 2 cols for this row inside al-form.
 
-   WITHOUT Date Type (3 children): use 1 column so each field is on its own row */
+   WITH Date Type (Date Type, Current Study, ...): 2-1 layout (Date Type|Current Study in row 1, End Date in row 2)
+   WITHOUT Date Type (Current Study, Start Date, End Date): 1-1-1 layout (each field on its own row) */
 @media (max-width: 767.98px) {
   :host ::ng-deep app-flex-grid.row.min-cols-2,
   :host ::ng-deep app-flex-grid.col.min-cols-2 {
@@ -278,8 +293,24 @@ select.al-form__control {
     grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
   }
 
-  /* Without Date Type: force 1 column so Current Study, Start Date, End Date each on own row */
-  :host ::ng-deep app-flex-grid.row.min-cols-2 > *:first-child:nth-last-child(3) {
+  /* Ensure checkbox and input don't span full width - fit in their grid cells */
+  :host ::ng-deep app-flex-grid.row.min-cols-2 al-checkbox,
+  :host ::ng-deep app-flex-grid.row.min-cols-2 al-input,
+  :host ::ng-deep app-flex-grid.col.min-cols-2 al-checkbox,
+  :host ::ng-deep app-flex-grid.col.min-cols-2 al-input {
+    grid-column: auto !important;
+    width: 100% !important;
+    max-width: 100% !important;
+  }
+
+  /* WITH Date Type (Date Type, Current Study, End Date): ensure inputs don't span full width */
+  :host ::ng-deep app-flex-grid.row.min-cols-2 > *:first-child:nth-last-child(3):is(al-input) {
+    grid-column: auto !important;
+  }
+
+  /* WITHOUT Date Type (first child is checkbox): force 1 column so Current Study, Start Date, End Date each on own row */
+  :host ::ng-deep app-flex-grid.row.min-cols-2 > *:first-child:nth-last-child(3):is(al-checkbox),
+  :host ::ng-deep app-flex-grid.row.min-cols-2 > *:first-child:nth-last-child(3):is(al-checkbox) ~ * {
     grid-column: 1 / -1 !important;
   }
 }
@@ -291,28 +322,203 @@ select.al-form__control {
     grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
   }
 
-  /* Without Date Type: force 1 column so Current Study, Start Date, End Date each on own row */
-  :host ::ng-deep app-flex-grid.row.min-cols-2 > *:first-child:nth-last-child(3) {
+  /* Ensure checkbox and input don't span full width - fit in their grid cells */
+  :host ::ng-deep app-flex-grid.row.min-cols-2 al-checkbox,
+  :host ::ng-deep app-flex-grid.row.min-cols-2 al-input,
+  :host ::ng-deep app-flex-grid.col.min-cols-2 al-checkbox,
+  :host ::ng-deep app-flex-grid.col.min-cols-2 al-input {
+    grid-column: auto !important;
+    width: 100% !important;
+    max-width: 100% !important;
+  }
+
+  /* WITH Date Type (Date Type, Current Study, End Date): ensure inputs don't span full width */
+  :host ::ng-deep app-flex-grid.row.min-cols-2 > *:first-child:nth-last-child(3):is(al-input) {
+    grid-column: auto !important;
+  }
+
+  /* WITHOUT Date Type (first child is checkbox): force 1 column so Current Study, Start Date, End Date each on own row */
+  :host ::ng-deep app-flex-grid.row.min-cols-2 > *:first-child:nth-last-child(3):is(al-checkbox),
+  :host ::ng-deep app-flex-grid.row.min-cols-2 > *:first-child:nth-last-child(3):is(al-checkbox) ~ * {
     grid-column: 1 / -1 !important;
   }
 }
 
-/* When form wrapper is wide enough (600px+): show initial order (Date Type, Start Date, End Date, Current Study).
-   DOM order is Date Type, Current Study, Start Date, End Date; reorder with CSS.
-   Container query so order follows form width (works in test-styling and narrow viewports).
+/* When form wrapper is wide enough (600px+): maintain responsive order with CSS.
+   Container query so order follows form width.
 
-   WITHOUT Date Type (3 children): Start Date, End Date on row 1, Current Study on row 2 (as column) */
+   ORDER REQUIREMENTS:
+   - 4 fields: Date Type | Start Date | End Date | Current Study
+   - 3 fields (no Start Date): Date Type | End Date | Current Study
+   - 3 fields (no Date Type): Start Date | End Date | Current Study
+   - 2 fields (no Date Type, no Start Date): End Date | Current Study */
 @container form-wrapper (min-width: 600px) {
-  /* With Date Type present (4 children): Date Type, Start Date, End Date, Current Study */
-  :host ::ng-deep app-flex-grid.row.min-cols-2 > *:nth-child(1) { order: 1; }
-  :host ::ng-deep app-flex-grid.row.min-cols-2 > *:nth-child(2) { order: 4; }
-  :host ::ng-deep app-flex-grid.row.min-cols-2 > *:nth-child(3) { order: 2; }
-  :host ::ng-deep app-flex-grid.row.min-cols-2 > *:nth-child(4) { order: 3; }
-
-  /* Without Date Type (3 children): Start Date, End Date, Current Study all in ONE row */
-  :host ::ng-deep app-flex-grid.row.min-cols-2 > *:first-child:nth-last-child(3) { order: 3; } /* Current Study last */
-  :host ::ng-deep app-flex-grid.row.min-cols-2 > *:nth-child(2):nth-last-child(2) { order: 1; } /* Start Date first */
-  :host ::ng-deep app-flex-grid.row.min-cols-2 > *:nth-child(3):last-child { order: 2; } /* End Date middle */
+  /* === 4 CHILDREN: Date Type, Current Study, Start Date, End Date === */
+  /* Result: Date Type | Start Date | End Date | Current Study */
+  ::ng-deep app-flex-grid.row.min-cols-2 > *:nth-child(1) { order: 1; } /* Date Type → 1st */
+  ::ng-deep app-flex-grid.row.min-cols-2 > *:nth-child(2) { order: 4; } /* Current Study → 4th */
+  ::ng-deep app-flex-grid.row.min-cols-2 > *:nth-child(3) { order: 2; } /* Start Date → 2nd */
+  ::ng-deep app-flex-grid.row.min-cols-2 > *:nth-child(4) { order: 3; } /* End Date → 3rd */
+
+  /* === 3 CHILDREN: Date Type, Current Study, End Date (NO Start Date) === */
+  /* DOM order: Date Type(1), Current Study(2), End Date(3) */
+  /* Result: Date Type | End Date | Current Study */
+  ::ng-deep app-flex-grid.row.min-cols-2 > *:first-child:nth-last-child(3) {
+    order: 1;
+    grid-column: 1 / 2 !important;
+  }
+  ::ng-deep app-flex-grid.row.min-cols-2 > *:first-child:nth-last-child(3) ~ *:nth-child(2) {
+    order: 3;
+    grid-column: 4 / 5 !important;
+  }
+  ::ng-deep app-flex-grid.row.min-cols-2 > *:first-child:nth-last-child(3) ~ *:nth-child(3) {
+    order: 2;
+    grid-column: 2 / 4 !important;
+  }
+
+  /* === 3 CHILDREN: Current Study, Start Date, End Date (NO Date Type) === */
+  /* DOM order: Current Study(1), Start Date(2), End Date(3) */
+  /* Result: Start Date | End Date | Current Study */
+  /* Override: checkbox (1st child) moves to 3rd position */
+  ::ng-deep app-flex-grid.row.min-cols-2 > *:first-child:nth-last-child(3):is(al-checkbox) {
+    order: 3;
+    grid-column: 4 / 5 !important;
+  }
+  ::ng-deep app-flex-grid.row.min-cols-2 > *:first-child:nth-last-child(3):is(al-checkbox) ~ *:nth-child(2) {
+    order: 1;
+    grid-column: 1 / 2 !important;
+  }
+  ::ng-deep app-flex-grid.row.min-cols-2 > *:first-child:nth-last-child(3):is(al-checkbox) ~ *:nth-child(3) {
+    order: 2;
+    grid-column: 2 / 4 !important;
+  }
+
+  /* === 2 CHILDREN: Current Study, End Date (NO Date Type, NO Start Date) === */
+  /* DOM order: Current Study(1), End Date(2) */
+  /* Result: End Date | Current Study */
+  ::ng-deep app-flex-grid.row.min-cols-2 > *:first-child:nth-last-child(2) {
+    order: 2;
+    grid-column: 2 / 3 !important;
+  }
+  ::ng-deep app-flex-grid.row.min-cols-2 > *:nth-child(2):last-child {
+    order: 1;
+    grid-column: 1 / 2 !important;
+  }
+}
+
+/* ============================================
+   3-COLUMN LAYOUT RULES
+   Scenario: Start Date, End Date, Checkbox (no Date Type)
+
+   Desktop (600px+): Start Date | End Date | Checkbox (equal 1fr each)
+   Mobile (< 600px): Checkbox (full width, first), then Start Date | End Date
+
+   DOM order in actual project: Checkbox(1), Start Date(2), End Date(3)
+   ============================================ */
+
+/* Mobile layout: 2 columns, checkbox first (full width), dates in row 2 */
+@media (max-width: 767.98px) {
+  /* Target 3-column grids using min-cols-3 class or style attribute */
+  :host ::ng-deep app-flex-grid.row.min-cols-3,
+  :host ::ng-deep app-flex-grid.row[style*="--count-desktop: 3"] {
+    --current-count: 2 !important;
+    grid-template-columns: repeat(2, 1fr) !important;
+  }
+
+  /* Move checkbox to first position, full width */
+  :host ::ng-deep app-flex-grid.row.min-cols-3 al-checkbox,
+  :host ::ng-deep app-flex-grid.row[style*="--count-desktop: 3"] al-checkbox {
+    order: -1 !important;
+    grid-column: 1 / -1 !important;
+  }
+
+  /* Extra small screens (400.98px or less): all fields in separate rows (1 column) */
+  @media (max-width: 400.98px) {
+    :host ::ng-deep app-flex-grid.row.min-cols-3,
+    :host ::ng-deep app-flex-grid.row[style*="--count-desktop: 3"] {
+      --current-count: 1 !important;
+      grid-template-columns: 1fr !important;
+    }
+
+    /* Reset all to natural DOM order: Current Study, Start Date, End Date */
+    :host ::ng-deep app-flex-grid.row.min-cols-3 > *,
+    :host ::ng-deep app-flex-grid.row[style*="--count-desktop: 3"] > * {
+      order: 0 !important;
+      grid-column: auto !important;
+    }
+  }
+}
+
+/* Container query for mobile */
+@container form-wrapper (max-width: 600px) {
+  :host ::ng-deep app-flex-grid.row.min-cols-3,
+  :host ::ng-deep app-flex-grid.row[style*="--count-desktop: 3"] {
+    --current-count: 2 !important;
+    grid-template-columns: repeat(2, 1fr) !important;
+  }
+
+  /* Move checkbox to first position, full width */
+  :host ::ng-deep app-flex-grid.row.min-cols-3 al-checkbox,
+  :host ::ng-deep app-flex-grid.row[style*="--count-desktop: 3"] al-checkbox {
+    order: -1 !important;
+    grid-column: 1 / -1 !important;
+  }
+}
+
+/* Extra small container (400px or less): all fields in separate rows (1 column) */
+@container form-wrapper (max-width: 400px) {
+  :host ::ng-deep app-flex-grid.row.min-cols-3,
+  :host ::ng-deep app-flex-grid.row[style*="--count-desktop: 3"] {
+    --current-count: 1 !important;
+    grid-template-columns: 1fr !important;
+  }
+
+  /* Reset all to natural DOM order: Current Study, Start Date, End Date */
+  :host ::ng-deep app-flex-grid.row.min-cols-3 > *,
+  :host ::ng-deep app-flex-grid.row[style*="--count-desktop: 3"] > * {
+    order: 0 !important;
+    grid-column: auto !important;
+  }
+}
+
+/* Desktop layout: 3 equal columns, reorder to Start Date | End Date | Checkbox */
+@container form-wrapper (min-width: 600px) {
+  /* Force 3 equal columns */
+  ::ng-deep app-flex-grid.row.min-cols-3,
+  ::ng-deep app-flex-grid.row[style*="--count-desktop: 3"] {
+    grid-template-columns: repeat(3, 1fr) !important;
+  }
+
+  /* === 3 CHILDREN: Checkbox(1), Start Date(2), End Date(3) === */
+  /* Reorder to: Start Date | End Date | Checkbox */
+  ::ng-deep app-flex-grid.row.min-cols-3 > *:first-child:nth-last-child(3):is(al-checkbox),
+  ::ng-deep app-flex-grid.row[style*="--count-desktop: 3"] > *:first-child:nth-last-child(3):is(al-checkbox) {
+    order: 3 !important;
+    grid-column: auto !important;
+  }
+  ::ng-deep app-flex-grid.row.min-cols-3 > *:first-child:nth-last-child(3):is(al-checkbox) ~ *:nth-child(2),
+  ::ng-deep app-flex-grid.row[style*="--count-desktop: 3"] > *:first-child:nth-last-child(3):is(al-checkbox) ~ *:nth-child(2) {
+    order: 1 !important;
+    grid-column: auto !important;
+  }
+  ::ng-deep app-flex-grid.row.min-cols-3 > *:first-child:nth-last-child(3):is(al-checkbox) ~ *:nth-child(3),
+  ::ng-deep app-flex-grid.row[style*="--count-desktop: 3"] > *:first-child:nth-last-child(3):is(al-checkbox) ~ *:nth-child(3) {
+    order: 2 !important;
+    grid-column: auto !important;
+  }
+
+  /* === 2 CHILDREN: Checkbox(1), Start Date OR End Date(2) === */
+  /* Checkbox stays in position 2, date in position 1 */
+  ::ng-deep app-flex-grid.row.min-cols-3 > *:first-child:nth-last-child(2):is(al-checkbox),
+  ::ng-deep app-flex-grid.row[style*="--count-desktop: 3"] > *:first-child:nth-last-child(2):is(al-checkbox) {
+    order: 2 !important;
+    grid-column: 3 / 4 !important;
+  }
+  ::ng-deep app-flex-grid.row.min-cols-3 > *:first-child:nth-last-child(2):is(al-checkbox) ~ *:nth-child(2),
+  ::ng-deep app-flex-grid.row[style*="--count-desktop: 3"] > *:first-child:nth-last-child(2):is(al-checkbox) ~ *:nth-child(2) {
+    order: 1 !important;
+    grid-column: 1 / 3 !important;
+  }
 }
 
 /* Fade-in animation for FABs on initial render */

package/src/lib/test-styling/test-styling.component.html

@@ -149,6 +149,164 @@
       <!-- candidate-section-form -->
 
     </al-tab>
+    <al-tab labelText="Education">
+      <h2>Education Section - Responsive Form Layout</h2>
+      <p>Testing field order and responsive behavior</p>
+
+      <al-form [showLeftButton]="true" [showSaveButton]="true" [showDeleteButton]="true" [testId]="'education-section'"
+        (leftButtonClick)="onLeftButtonClick($event)" (saveButtonClick)="onSaveButtonClick($event)"
+        (deleteButtonClick)="onDeleteButtonClick($event)">
+        <div leftButtonContent>
+          <al-ai-apply-bar [placeholder]="'Apply AI'" [applyLabel]="'Apply'" [showHelperText]="true" [showClose]="false"
+            [showChevronButton]="false" [applyDisabled]="false" [value]="'Apply AI'"
+            [options]="['Typing', 'Gathering', 'Processing']" (valueChange)="onAIApplyValueChange($event)"
+            (applyClick)="onAIApplyClick()" (closeClick)="onAIApplyClose()">
+          </al-ai-apply-bar>
+        </div>
+
+        <!-- Row: Date Type, Current Study (checkbox), Start Date, End Date -->
+        <!-- Mobile: 2 rows (Date Type|Checkbox, Start|End) - Desktop: reordered -->
+        <app-flex-grid [type]="'row'" [mobRow]="2" [tabRow]="2" [desktop]="4" [gap]="'16px'" [minColumns]="2">
+          <al-input [label]="'Date Type'" [placeholder]="'Select Date Type'" [value]="'Month/Year'" [type]="'text'"
+            [disabled]="false" [helperText]="false" [hasDropDown]="true" [options]="['Month/Year','Year']"
+            [size]="'base'" [types]="'primary'" [dataTestId]="'edu-date-type'"></al-input>
+          <al-checkbox labelPosition="after" labelText="Current Study"
+            (change)="onFormCheckboxChange($event)"></al-checkbox>
+          <al-input [label]="'start Date'" [placeholder]="'End Date'" [value]="''" [type]="'date'" [disabled]="false"
+            [helperText]="false" [size]="'base'" [types]="'primary'" [dataTestId]="'edu-end-date'"
+            (monthSelected)="onMonthSelected($event)" (yearSelected)="onYearSelected($event)"></al-input>
+          <al-input [label]="'End Date'" [placeholder]="'End Date'" [value]="''" [type]="'date'" [disabled]="false"
+            [helperText]="false" [size]="'base'" [types]="'primary'" [dataTestId]="'edu-end-date'"
+            (monthSelected)="onMonthSelected($event)" (yearSelected)="onYearSelected($event)"></al-input>
+        </app-flex-grid>
+
+        <!-- Row: Core Fields -->
+        <app-flex-grid [type]="'column'" [rows]="1" [mobRow]="1" [tabRow]="1" [desktop]="1" [gap]="'16px'">
+          <al-input [label]="'Course Title'" [placeholder]="'Course Title'" [value]="'Bachelor of Science'"
+            [type]="'text'" [size]="'base'" [types]="'primary'"></al-input>
+          <al-input [label]="'School Name'" [placeholder]="'School Name'" [value]="'Oxford University'" [type]="'text'"
+            [size]="'base'" [types]="'primary'"></al-input>
+          <al-input [label]="'Type of Degree'" [placeholder]="'Type of Degree'" [value]="'Bachelor'" [type]="'text'"
+            [size]="'base'" [types]="'primary'"></al-input>
+          <al-input [label]="'Education Description'" [placeholder]="'Education Description'"
+            [value]="'Studied Computer Science'" [type]="'text'" [size]="'base'" [types]="'primary'"></al-input>
+          <al-input [label]="'Education Location'" [placeholder]="'Education Location'" [value]="'Oxford, UK'"
+            [type]="'text'" [size]="'base'" [types]="'primary'"></al-input>
+        </app-flex-grid>
+
+        <!-- Rich Text Editor Section -->
+        <app-flex-grid [type]="'column'" [gap]="16" [countMobile]="1" [countTablet]="1" [countDesktop]="1">
+          <app-custom-editor [isVisible]="true" [showTable]="true" [historyControls]="true" [autobullet]="true"
+            [showLabels]="true" leftLabelText="Document Title" rightLabelText="Page 1 of 5"
+            initialValue="<p>Start typing here...</p>" editScreenSection="GENERAL" actionType="edit"
+            [dataTestId]="'custom-editor-testid'" (contentChangeFromQuill)="onContentChange($event)"
+            (ApplyAIinQuill)="onAIApply($event)"></app-custom-editor>
+        </app-flex-grid>
+      </al-form>
+    </al-tab>
+    <al-tab labelText="Edu Without Date Type">
+      <h2>Education Section - Without Date Type</h2>
+      <p>Testing layout when Date Type field is not present</p>
+
+      <al-form [showLeftButton]="true" [showSaveButton]="true" [showDeleteButton]="true" [testId]="'edu-without-date-type'"
+        (leftButtonClick)="onLeftButtonClick($event)" (saveButtonClick)="onSaveButtonClick($event)"
+        (deleteButtonClick)="onDeleteButtonClick($event)">
+        <div leftButtonContent>
+          <al-ai-apply-bar [placeholder]="'Apply AI'" [applyLabel]="'Apply'" [showHelperText]="true" [showClose]="false"
+            [showChevronButton]="false" [applyDisabled]="false" [value]="'Apply AI'"
+            [options]="['Typing', 'Gathering', 'Processing']" (valueChange)="onAIApplyValueChange($event)"
+            (applyClick)="onAIApplyClick()" (closeClick)="onAIApplyClose()">
+          </al-ai-apply-bar>
+        </div>
+
+        <!-- Row: Current Study (checkbox), Start Date, End Date -->
+        <!-- Mobile: 3 rows (each field on own row) - Desktop: reordered -->
+        <app-flex-grid [type]="'row'" [mobRow]="2" [tabRow]="2" [desktop]="4" [gap]="'16px'" [minColumns]="2">
+          <al-checkbox labelPosition="after" labelText="Current Study"
+            (change)="onFormCheckboxChange($event)"></al-checkbox>
+          <al-input [label]="'Start Date'" [placeholder]="'Start Date'" [value]="''" [type]="'date'" [disabled]="false"
+            [helperText]="false" [size]="'base'" [types]="'primary'" [dataTestId]="'edu-start-date'"
+            (monthSelected)="onMonthSelected($event)" (yearSelected)="onYearSelected($event)"></al-input>
+          <al-input [label]="'End Date'" [placeholder]="'End Date'" [value]="''" [type]="'date'" [disabled]="false"
+            [helperText]="false" [size]="'base'" [types]="'primary'" [dataTestId]="'edu-end-date'"
+            (monthSelected)="onMonthSelected($event)" (yearSelected)="onYearSelected($event)"></al-input>
+        </app-flex-grid>
+
+        <!-- Row: Core Fields -->
+        <app-flex-grid [type]="'column'" [rows]="1" [mobRow]="1" [tabRow]="1" [desktop]="1" [gap]="'16px'">
+          <al-input [label]="'Course Title'" [placeholder]="'Course Title'" [value]="'Bachelor of Science'"
+            [type]="'text'" [size]="'base'" [types]="'primary'"></al-input>
+          <al-input [label]="'School Name'" [placeholder]="'School Name'" [value]="'Oxford University'" [type]="'text'"
+            [size]="'base'" [types]="'primary'"></al-input>
+          <al-input [label]="'Type of Degree'" [placeholder]="'Type of Degree'" [value]="'Bachelor'" [type]="'text'"
+            [size]="'base'" [types]="'primary'"></al-input>
+          <al-input [label]="'Education Description'" [placeholder]="'Education Description'"
+            [value]="'Studied Computer Science'" [type]="'text'" [size]="'base'" [types]="'primary'"></al-input>
+          <al-input [label]="'Education Location'" [placeholder]="'Education Location'" [value]="'Oxford, UK'"
+            [type]="'text'" [size]="'base'" [types]="'primary'"></al-input>
+        </app-flex-grid>
+
+        <!-- Rich Text Editor Section -->
+        <app-flex-grid [type]="'column'" [gap]="16" [countMobile]="1" [countTablet]="1" [countDesktop]="1">
+          <app-custom-editor [isVisible]="true" [showTable]="true" [historyControls]="true" [autobullet]="true"
+            [showLabels]="true" leftLabelText="Document Title" rightLabelText="Page 1 of 5"
+            initialValue="<p>Start typing here...</p>" editScreenSection="GENERAL" actionType="edit"
+            [dataTestId]="'custom-editor-testid'" (contentChangeFromQuill)="onContentChange($event)"
+            (ApplyAIinQuill)="onAIApply($event)"></app-custom-editor>
+        </app-flex-grid>
+      </al-form>
+    </al-tab>
+    <al-tab labelText="3-Column Layout">
+      <h2>3-Column Layout Test</h2>
+      <p>Start Date → End Date → Checkbox (equal widths on desktop, checkbox first on mobile)</p>
+
+      <al-form [showLeftButton]="true" [showSaveButton]="true" [showDeleteButton]="true" [testId]="'3-col-layout'"
+        (leftButtonClick)="onLeftButtonClick($event)" (saveButtonClick)="onSaveButtonClick($event)"
+        (deleteButtonClick)="onDeleteButtonClick($event)">
+        <div leftButtonContent>
+          <al-ai-apply-bar [placeholder]="'Apply AI'" [applyLabel]="'Apply'" [showHelperText]="true" [showClose]="false"
+            [showChevronButton]="false" [applyDisabled]="false" [value]="'Apply AI'"
+            [options]="['Typing', 'Gathering', 'Processing']" (valueChange)="onAIApplyValueChange($event)"
+            (applyClick)="onAIApplyClick()" (closeClick)="onAIApplyClose()">
+          </al-ai-apply-bar>
+        </div>
+
+        <!-- 3-Column Layout: Start Date, End Date, Checkbox -->
+        <!-- Desktop: 3 equal columns (1fr each) -->
+        <!-- Mobile: Checkbox first (full width), then dates in row 2 -->
+        <app-flex-grid [type]="'row'" [mobRow]="2" [tabRow]="3" [desktop]="3" [gap]="'16px'" [minColumns]="3">
+          <al-input [label]="'Start Date'" [placeholder]="'Start Date'" [value]="''" [type]="'date'" [disabled]="false"
+            [helperText]="false" [size]="'base'" [types]="'primary'" [dataTestId]="'3-col-start-date'"
+            (monthSelected)="onMonthSelected($event)" (yearSelected)="onYearSelected($event)"></al-input>
+          <al-input [label]="'End Date'" [placeholder]="'End Date'" [value]="''" [type]="'date'" [disabled]="false"
+            [helperText]="false" [size]="'base'" [types]="'primary'" [dataTestId]="'3-col-end-date'"
+            (monthSelected)="onMonthSelected($event)" (yearSelected)="onYearSelected($event)"></al-input>
+          <al-checkbox labelPosition="after" labelText="Current Study"
+            (change)="onFormCheckboxChange($event)"></al-checkbox>
+        </app-flex-grid>
+
+        <!-- Test: Checkbox FIRST (matching actual project DOM order) -->
+        <p style="margin-top: 24px; color: #666; font-size: 14px;"><strong>Test with Checkbox First (Actual [type]="'row'" [mobRow]="2" [tabRow]="3" [desktop]="3" [gap]="'16px'" [minColumns]="3" Project Order):</strong></p>
+        <app-flex-grid>
+          <al-checkbox labelPosition="after" labelText="Current Study"
+            (change)="onFormCheckboxChange($event)"></al-checkbox>
+          <al-input [label]="'Start Date'" [placeholder]="'Start Date'" [value]="''" [type]="'date'" [disabled]="false"
+            [helperText]="false" [size]="'base'" [types]="'primary'" [dataTestId]="'3-col-start-date-2'"
+            (monthSelected)="onMonthSelected($event)" (yearSelected)="onYearSelected($event)"></al-input>
+          <al-input [label]="'End Date'" [placeholder]="'End Date'" [value]="''" [type]="'date'" [disabled]="false"
+            [helperText]="false" [size]="'base'" [types]="'primary'" [dataTestId]="'3-col-end-date-2'"
+            (monthSelected)="onMonthSelected($event)" (yearSelected)="onYearSelected($event)"></al-input>
+        </app-flex-grid>
+
+        <!-- Core Fields -->
+        <app-flex-grid [type]="'column'" [rows]="1" [mobRow]="1" [tabRow]="1" [desktop]="1" [gap]="'16px'">
+          <al-input [label]="'Course Title'" [placeholder]="'Course Title'" [value]="'Bachelor of Science'"
+            [type]="'text'" [size]="'base'" [types]="'primary'"></al-input>
+          <al-input [label]="'School Name'" [placeholder]="'School Name'" [value]="'Oxford University'" [type]="'text'"
+            [size]="'base'" [types]="'primary'"></al-input>
+        </app-flex-grid>
+      </al-form>
+    </al-tab>
     <al-tab labelText="CoverSheet">
       <h3>About Us</h3>
       <p>Learn more about our company and mission.</p>
@@ -158,4 +316,4 @@
       <p>Get in touch with us through various channels.</p>
     </al-tab>
   </al-tabs>
-</al-general-container>
+</al-general-container>