From ce157ca2f0a69936055b297e52d9e2a7cbc59c00 Mon Sep 17 00:00:00 2001 From: Echo Date: Thu, 2 Apr 2026 17:46:14 +0200 Subject: [PATCH] [Glitch] Profile redesign: Split fields row when evenly sized Port dc923c6425559266f0665fe2e294f6e412783810 to glitch-soc Signed-off-by: Claire --- .../features/account_timeline/components/fields.tsx | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/app/javascript/flavours/glitch/features/account_timeline/components/fields.tsx b/app/javascript/flavours/glitch/features/account_timeline/components/fields.tsx index 911d8145ff..ca3244157f 100644 --- a/app/javascript/flavours/glitch/features/account_timeline/components/fields.tsx +++ b/app/javascript/flavours/glitch/features/account_timeline/components/fields.tsx @@ -235,6 +235,7 @@ function useColumnWrap() { const columnCount = parseInt(styles.getPropertyValue('--cols')) || 2; const listWidth = listEle.offsetWidth; const colWidth = (listWidth - gap * (columnCount - 1)) / columnCount; + const halfColSpan = columnCount / 2; // Matrix to hold the grid layout. const itemGrid: { ele: HTMLElement; span: number }[][] = []; @@ -288,6 +289,16 @@ function useColumnWrap() { if (i < row.length - 1) { ele.dataset.cols = span.toString(); remainingRowSpan -= span; + } else if ( + row.length === halfColSpan && + span === 1 && + remainingRowSpan > 1 + ) { + // Special case for 2 items in a row where both items only need 1 column. + ele.dataset.cols = halfColSpan.toString(); + if (row[0]) { + row[0].ele.dataset.cols = halfColSpan.toString(); + } } else { // Last item in the row takes up remaining space to fill the row. ele.dataset.cols = remainingRowSpan.toString();