Improve the behavior of various views when a profile has a long name

res/css/photon/confirm-dialog.css

@@ -33,8 +33,10 @@
  */
 
 .confirmDialogTitle {
+  overflow: hidden;
   margin: 0;
   font-size: 1.2em;
+  text-overflow: ellipsis;
 }
 
 .confirmDialogContent {

src/components/app/Home.css

@@ -158,7 +158,11 @@
   display: grid;
   margin-top: 30px;
   column-gap: 30px;
-  grid-template-columns: 1fr 1fr;
+
+  /* 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,7 +210,9 @@
 
   .homeAdditionalContent,
   .homeInstructions {
-    grid: none;
+    /* 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);
   }
 }
 

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;
 }

src/components/app/ProfileDeleteButton.css

@@ -21,3 +21,8 @@
   color: var(--red-60);
   word-break: break-word;
 }
+
+.profileDeletePanel {
+  width: 500px;
+  max-width: 80vw;
+}

src/components/app/ProfileDeleteButton.js

@@ -84,6 +84,7 @@ export class ProfileDeleteButton extends PureComponent<ButtonProps> {
             'photon-button',
             'photon-button-default'
           )}
+          panelClassName="profileDeletePanel"
           label="Delete"
           title={`Click here to delete the profile ${smallProfileName}`}
           onPanelOpen={this.props.onOpenConfirmDialog}