From 71ec649f429220556f68a3d3169a60e459a50050 Mon Sep 17 00:00:00 2001 From: Julien Wajsberg Date: Mon, 15 May 2023 12:33:49 -0400 Subject: [PATCH 1/2] Improve the behavior of various views when a profile has a long name Fixes #4615 --- res/css/photon/confirm-dialog.css | 2 ++ src/components/app/Home.css | 4 ++-- src/components/app/ListOfPublishedProfiles.css | 3 ++- src/components/app/ProfileDeleteButton.css | 5 +++++ src/components/app/ProfileDeleteButton.js | 1 + 5 files changed, 12 insertions(+), 3 deletions(-) diff --git a/res/css/photon/confirm-dialog.css b/res/css/photon/confirm-dialog.css index dcc6abd6ce..036a9c1b47 100644 --- a/res/css/photon/confirm-dialog.css +++ b/res/css/photon/confirm-dialog.css @@ -33,8 +33,10 @@ */ .confirmDialogTitle { + overflow: hidden; margin: 0; font-size: 1.2em; + text-overflow: ellipsis; } .confirmDialogContent { diff --git a/src/components/app/Home.css b/src/components/app/Home.css index 3b113d7885..6b71256ea8 100644 --- a/src/components/app/Home.css +++ b/src/components/app/Home.css @@ -158,7 +158,7 @@ display: grid; margin-top: 30px; column-gap: 30px; - grid-template-columns: 1fr 1fr; + grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); /* minmax makes the grid ignore the element's intrinsic size. */ } .homeInstructionsTransitionGroup { @@ -206,7 +206,7 @@ .homeAdditionalContent, .homeInstructions { - grid: none; + grid-template-columns: minmax(0, 1fr); } } diff --git a/src/components/app/ListOfPublishedProfiles.css b/src/components/app/ListOfPublishedProfiles.css index e2a47f315e..2d040d09bf 100644 --- a/src/components/app/ListOfPublishedProfiles.css +++ b/src/components/app/ListOfPublishedProfiles.css @@ -64,7 +64,8 @@ } .publishedProfilesDate { - width: 10em; /* The default flex properties make that it can shrink, so this is really the initial size. */ + width: 10em; + flex: none; padding-right: 4px; white-space: nowrap; } diff --git a/src/components/app/ProfileDeleteButton.css b/src/components/app/ProfileDeleteButton.css index 3140edd028..9a455ad627 100644 --- a/src/components/app/ProfileDeleteButton.css +++ b/src/components/app/ProfileDeleteButton.css @@ -21,3 +21,8 @@ color: var(--red-60); word-break: break-word; } + +.profileDeletePanel { + width: 500px; + max-width: 80vw; +} diff --git a/src/components/app/ProfileDeleteButton.js b/src/components/app/ProfileDeleteButton.js index 2dac4932eb..e3f45181d2 100644 --- a/src/components/app/ProfileDeleteButton.js +++ b/src/components/app/ProfileDeleteButton.js @@ -84,6 +84,7 @@ export class ProfileDeleteButton extends PureComponent { 'photon-button', 'photon-button-default' )} + panelClassName="profileDeletePanel" label="Delete" title={`Click here to delete the profile ${smallProfileName}`} onPanelOpen={this.props.onOpenConfirmDialog} From e8f48e6f9fa60ef4ce4884c097bef657b90358d9 Mon Sep 17 00:00:00 2001 From: Julien Wajsberg Date: Tue, 16 May 2023 11:12:44 -0400 Subject: [PATCH 2/2] Review comment: improve the comment about using minmax --- src/components/app/Home.css | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/src/components/app/Home.css b/src/components/app/Home.css index 6b71256ea8..6cbb61484e 100644 --- a/src/components/app/Home.css +++ b/src/components/app/Home.css @@ -158,7 +158,11 @@ display: grid; margin-top: 30px; column-gap: 30px; - grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); /* minmax makes the grid ignore the element's intrinsic size. */ + + /* minmax makes the grid ignore the element's intrinsic size. + * If we use 1fr directly, the min is "auto", which depends on the content. If + * the content is too large then this can break the layout. */ + grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .homeInstructionsTransitionGroup { @@ -206,6 +210,8 @@ .homeAdditionalContent, .homeInstructions { + /* we switch to use just one column instead of 2. + * Note tha/ minmax makes the grid ignore the element's intrinsic size. */ grid-template-columns: minmax(0, 1fr); } }