Skip to content

Commit c3a5e50

Browse files
brucehsubrucehsu
committed
ui(git): fix horizontal overflow
1 parent 044f9d0 commit c3a5e50

2 files changed

Lines changed: 64 additions & 48 deletions

File tree

‎apps/desktop/src/components/MainPane/tabs/git/GitDiff.module.css‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -445,15 +445,19 @@
445445
overflow-y: hidden;
446446
}
447447

448+
.diffColumnBody {
449+
width: max-content;
450+
min-width: 100%;
451+
}
452+
448453
.diffColumnLeft {
449454
border-right: 1px solid var(--border);
450455
}
451456

452457
.diffColumnRow {
453458
display: grid;
454459
grid-template-columns: 48px auto;
455-
width: max-content;
456-
min-width: 100%;
460+
width: 100%;
457461
}
458462

459463
.diffCell {

‎apps/desktop/src/components/MainPane/tabs/git/GitFileCard.tsx‎

Lines changed: 58 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -151,21 +151,25 @@ export default function GitFileCard({ file, fileKey, isOpen, onToggle }: GitFile
151151
className={`${styles.diffColumn} ${styles.diffColumnLeft}`}
152152
onPointerDownCapture={() => handleColumnPointerDown("left")}
153153
>
154-
<div className={styles.diffColumnRow}>
155-
<div className={styles.diffGutter} />
156-
<div className={`${styles.diffCell} ${styles.diffCellMeta}`}>
157-
<code className={styles.diffCode}>Binary file changed</code>
154+
<div className={styles.diffColumnBody}>
155+
<div className={styles.diffColumnRow}>
156+
<div className={styles.diffGutter} />
157+
<div className={`${styles.diffCell} ${styles.diffCellMeta}`}>
158+
<code className={styles.diffCode}>Binary file changed</code>
159+
</div>
158160
</div>
159161
</div>
160162
</div>
161163
<div
162164
className={`${styles.diffColumn} ${styles.diffColumnRight}`}
163165
onPointerDownCapture={() => handleColumnPointerDown("right")}
164166
>
165-
<div className={styles.diffColumnRow}>
166-
<div className={styles.diffGutter} />
167-
<div className={`${styles.diffCell} ${styles.diffCellMeta}`}>
168-
<code className={styles.diffCode}>Binary file changed</code>
167+
<div className={styles.diffColumnBody}>
168+
<div className={styles.diffColumnRow}>
169+
<div className={styles.diffGutter} />
170+
<div className={`${styles.diffCell} ${styles.diffCellMeta}`}>
171+
<code className={styles.diffCode}>Binary file changed</code>
172+
</div>
169173
</div>
170174
</div>
171175
</div>
@@ -176,21 +180,25 @@ export default function GitFileCard({ file, fileKey, isOpen, onToggle }: GitFile
176180
className={`${styles.diffColumn} ${styles.diffColumnLeft}`}
177181
onPointerDownCapture={() => handleColumnPointerDown("left")}
178182
>
179-
<div className={styles.diffColumnRow}>
180-
<div className={styles.diffGutter} />
181-
<div className={`${styles.diffCell} ${styles.diffCellMeta}`}>
182-
<code className={styles.diffCode}>No textual diff available</code>
183+
<div className={styles.diffColumnBody}>
184+
<div className={styles.diffColumnRow}>
185+
<div className={styles.diffGutter} />
186+
<div className={`${styles.diffCell} ${styles.diffCellMeta}`}>
187+
<code className={styles.diffCode}>No textual diff available</code>
188+
</div>
183189
</div>
184190
</div>
185191
</div>
186192
<div
187193
className={`${styles.diffColumn} ${styles.diffColumnRight}`}
188194
onPointerDownCapture={() => handleColumnPointerDown("right")}
189195
>
190-
<div className={styles.diffColumnRow}>
191-
<div className={styles.diffGutter} />
192-
<div className={`${styles.diffCell} ${styles.diffCellMeta}`}>
193-
<code className={styles.diffCode}>No textual diff available</code>
196+
<div className={styles.diffColumnBody}>
197+
<div className={styles.diffColumnRow}>
198+
<div className={styles.diffGutter} />
199+
<div className={`${styles.diffCell} ${styles.diffCellMeta}`}>
200+
<code className={styles.diffCode}>No textual diff available</code>
201+
</div>
194202
</div>
195203
</div>
196204
</div>
@@ -201,43 +209,47 @@ export default function GitFileCard({ file, fileKey, isOpen, onToggle }: GitFile
201209
className={`${styles.diffColumn} ${styles.diffColumnLeft}`}
202210
onPointerDownCapture={() => handleColumnPointerDown("left")}
203211
>
204-
{file.rows.map((row, index) => {
205-
const cellClass = `${styles.diffCell} ${getCellClass(row.left.type)}`;
206-
const gutterClass = `${styles.diffGutter} ${getGutterClass(row.left.type)}`;
207-
const isMeta = row.left.type === "meta" || row.right.type === "meta";
208-
return (
209-
<div key={`${fileKey}-left-${index}`} className={styles.diffColumnRow}>
210-
<div className={gutterClass}>{row.leftLine !== null ? row.leftLine : ""}</div>
211-
<div className={cellClass}>
212-
<code
213-
className={styles.diffCode}
214-
dangerouslySetInnerHTML={getLineHtml(row.left.text, file.language, isMeta)}
215-
/>
212+
<div className={styles.diffColumnBody}>
213+
{file.rows.map((row, index) => {
214+
const cellClass = `${styles.diffCell} ${getCellClass(row.left.type)}`;
215+
const gutterClass = `${styles.diffGutter} ${getGutterClass(row.left.type)}`;
216+
const isMeta = row.left.type === "meta" || row.right.type === "meta";
217+
return (
218+
<div key={`${fileKey}-left-${index}`} className={styles.diffColumnRow}>
219+
<div className={gutterClass}>{row.leftLine !== null ? row.leftLine : ""}</div>
220+
<div className={cellClass}>
221+
<code
222+
className={styles.diffCode}
223+
dangerouslySetInnerHTML={getLineHtml(row.left.text, file.language, isMeta)}
224+
/>
225+
</div>
216226
</div>
217-
</div>
218-
);
219-
})}
227+
);
228+
})}
229+
</div>
220230
</div>
221231
<div
222232
className={`${styles.diffColumn} ${styles.diffColumnRight}`}
223233
onPointerDownCapture={() => handleColumnPointerDown("right")}
224234
>
225-
{file.rows.map((row, index) => {
226-
const cellClass = `${styles.diffCell} ${getCellClass(row.right.type)}`;
227-
const gutterClass = `${styles.diffGutter} ${getGutterClass(row.right.type)}`;
228-
const isMeta = row.left.type === "meta" || row.right.type === "meta";
229-
return (
230-
<div key={`${fileKey}-right-${index}`} className={styles.diffColumnRow}>
231-
<div className={gutterClass}>{row.rightLine !== null ? row.rightLine : ""}</div>
232-
<div className={cellClass}>
233-
<code
234-
className={styles.diffCode}
235-
dangerouslySetInnerHTML={getLineHtml(row.right.text, file.language, isMeta)}
236-
/>
235+
<div className={styles.diffColumnBody}>
236+
{file.rows.map((row, index) => {
237+
const cellClass = `${styles.diffCell} ${getCellClass(row.right.type)}`;
238+
const gutterClass = `${styles.diffGutter} ${getGutterClass(row.right.type)}`;
239+
const isMeta = row.left.type === "meta" || row.right.type === "meta";
240+
return (
241+
<div key={`${fileKey}-right-${index}`} className={styles.diffColumnRow}>
242+
<div className={gutterClass}>{row.rightLine !== null ? row.rightLine : ""}</div>
243+
<div className={cellClass}>
244+
<code
245+
className={styles.diffCode}
246+
dangerouslySetInnerHTML={getLineHtml(row.right.text, file.language, isMeta)}
247+
/>
248+
</div>
237249
</div>
238-
</div>
239-
);
240-
})}
250+
);
251+
})}
252+
</div>
241253
</div>
242254
</>
243255
)}

0 commit comments

Comments
 (0)