Bug 1621222 - Fix new event attendee list with huge fonts r=pmorris
authorJonathan Michalon <dev@michalon.eu>
Wed, 25 Mar 2020 19:16:41 +0000
changeset 38574 cccef4515d0d0ca502e6ad214515ec34b77f0743
parent 38573 1d50ffd68d770eaf514613e7caf6e3b98d245685
child 38575 e512016183acb92a2ab689709f9779e36dff526d
push id400
push userclokep@gmail.com
push dateMon, 04 May 2020 18:56:09 +0000
reviewerspmorris
bugs1621222
Bug 1621222 - Fix new event attendee list with huge fonts r=pmorris In the calendar, "Event" => "Invite Attendees", use a proportional height for the attendee list's rows and make the icons be centered. Differential Revision: https://phabricator.services.mozilla.com/D68007
calendar/base/themes/common/dialogs/calendar-event-dialog.css
--- a/calendar/base/themes/common/dialogs/calendar-event-dialog.css
+++ b/calendar/base/themes/common/dialogs/calendar-event-dialog.css
@@ -631,24 +631,29 @@ calendar-event-freebusy-day > box {
   color: inherit !important;
 
   /* we set the minimal height to the height of the
      largest icon [the usertype-icon in this case] to
      ensure that the rows of the freebusy-grid and
      the attendee-list always have the same height,
      regardless of the font size.
   */
-  height: 17px;
+  height: 1.2em;
 }
 
 .addressingWidgetCell {
   border-bottom: 1px solid var(--eventWidgetBorderColor);
   padding: 0px;
 }
 
+.addressingWidgetCell > image {
+  height: 16px;
+  margin-block: auto;
+}
+
 .addressingWidgetCell:first-child {
   border-top: none;
 }
 
 .dummy-row-cell:first-child {
   border-top: none;
 }
 
@@ -737,22 +742,23 @@ calendar-event-freebusy-day > box {
   border-right: 1px solid ThreeDLightShadow;
   min-width: 10px;
   min-height: 10px;
   height: 400px;
 }
 
 #attendees-list {
   -moz-user-focus: normal;
-  overflow: hidden;
+  overflow-x: hidden;
+  overflow-y: auto;
 }
 
 #attendees-list > richlistitem {
-  max-height: 17px;
-  min-height: 17px;
+  max-height: 1.2em;
+  min-height: 1.2em;
   flex: 1;
   display: flex;
 }
 
 #attendees-list .addressingWidgetCell {
   display: flex;
   width: 27px;
   text-align: center;