Improve wraping of report changelog content

Including minor (slightly unrelated) spacing improvements
webkom · Sep 13, 2024 · 6590272 · 6590272
1 parent c1651c2
commit 6590272
Show file tree

Hide file tree

Showing 5 changed files with 14 additions and 25 deletions.
diff --git a/app/components/AddToCalendar/AddToCalendar.css b/app/components/AddToCalendar/AddToCalendar.css
@@ -1,13 +1,8 @@
-.calendarToggleButton {
-  margin-top: var(--spacing-md);
-  margin-bottom: var(--spacing-sm);
-}
-
 .calendarImportCard {
   margin-top: var(--spacing-sm);
 }
 
 .calendarLink {
   display: block;
-  margin-bottom: var(--spacing-md);
+  margin-bottom: var(--spacing-sm);
 }
diff --git a/app/components/AddToCalendar/AddToCalendar.tsx b/app/components/AddToCalendar/AddToCalendar.tsx
@@ -38,10 +38,7 @@ const AddToCalendarToggle = ({ icalToken, meeting }: Props) => {
 
   return (
     <div>
-      <Button
-        className={styles.calendarToggleButton}
-        onPress={() => setCalendarIsOpen(!calendarIsOpen)}
-      >
+      <Button onPress={() => setCalendarIsOpen(!calendarIsOpen)}>
         <Icon name="calendar-outline" size={19} />
         {!calendarIsOpen ? 'Vis kalenderimport' : 'Skjul kalenderimport'}
       </Button>

diff --git a/app/routes/meetings/components/MeetingDetail.css b/app/routes/meetings/components/MeetingDetail.css
@@ -7,20 +7,18 @@
   z-index: 80;
 }
 
-.changelogTooltip {
+.changelogTooltipContainer {
   z-index: 95;
 }
 
-.changelogTime {
-  display: flex;
+.changelogTooltip {
+  display: inline-flex;
 }
 
 .statusButtons {
-  margin-bottom: 10px;
+  margin-bottom: var(--spacing-md);
 }
 
 .meetingReactions {
-  display: flex;
-  flex-direction: row;
   margin: var(--spacing-sm) 0;
 }
diff --git a/app/routes/meetings/components/MeetingDetail.tsx b/app/routes/meetings/components/MeetingDetail.tsx
@@ -236,13 +236,12 @@ const MeetingDetails = () => {
                                 'lll',
                               )}
                               positions="right"
-                              containerClassName={styles.changelogTooltip}
+                              className={styles.changelogTooltip}
+                              containerClassName={
+                                styles.changelogTooltipContainer
+                              }
                             >
-                              <Time
-                                time={reportChangelog.createdAt}
-                                wordsAgo
-                                className={styles.changelogTime}
-                              />
+                              <Time time={reportChangelog.createdAt} wordsAgo />
                             </Tooltip>
                           </span>
                         </Flex>

diff --git a/app/styles/overlay.css b/app/styles/overlay.css
@@ -5,11 +5,11 @@
   background: var(--lego-card-color);
   border-radius: var(--border-radius-lg);
   position: absolute;
-  margin-top: 10px;
+  margin-top: var(--spacing-sm);
   z-index: 110;
 
   @media (--small-viewport) {
-    width: calc(100% - 10px);
+    width: calc(100% - var(--spacing-sm));
   }
 }
 
@@ -54,7 +54,7 @@
   flex-direction: row;
   align-items: center;
   justify-content: space-between;
-  padding: 10px 15px;
+  padding: var(--spacing-sm) var(--spacing-md);
   transition: background var(--easing-fast);
 
   &:hover {