styling fixes

force-app/main/default/lwc/timeline/slick.css

@@ -1,16 +1,14 @@
-.custom-border {
+.custom-container {
+    align-items: flex-start;
     border-bottom: 1px solid #767676;
+    padding: 0 1rem;
 }
 
-.custom-header {
-    margin-bottom: 1.25rem;
+.left-column {
+    padding-top: 4rem;
+    padding-bottom: 1.25rem;
 }
 
-.custom-filter {
-    margin-bottom: 1.5rem;
-    padding-top: 1rem;
-}
-
-.custom-padding {
-    padding: 1rem 1rem 0 1rem;
+.right-column {
+    padding-top: 1.75rem;
 }

force-app/main/default/lwc/timeline/slick.html

@@ -1,30 +1,24 @@
 <template>
     <div class="slds-theme_default slds-is-relative">
-        <div class="custom-padding">
-            <div class="slds-grid slds-border_bottom custom-border">
-                <div class="slds-col slds-large-size_8-of-12 slds-align-bottom custom-header">
-                    <h3 class="slds-card__header-title">
-                        <lightning-icon
-                            icon-name={headerIcon}
-                            size="small"
-                            class="slds-var-m-right_small"
-                        ></lightning-icon>
-                        {header}
-                    </h3>
-                </div>
-                <div class="slds-col slds-large-size_4-of-12 custom-filter">
-                    <c-timeline-filter
-                        lwc:if={filterIsActive}
-                        filter-properties={filterProperties}
-                        is-grouped={isGrouped}
-                        picklist-filter-1-label={picklistFilter1Label}
-                        picklist-filter-2-label={picklistFilter2Label}
-                        hide-my-activities-filter={hideMyActivitiesFilter}
-                        onfilterchange={handleFilter}
-                        log-event={logEvent}
-                        design={design}
-                    ></c-timeline-filter>
-                </div>
+        <div class="slds-grid custom-container">
+            <div class="slds-col slds-large-size_8-of-12 left-column">
+                <h3 class="slds-card__header-title">
+                    <lightning-icon icon-name={headerIcon} size="small" class="slds-var-m-right_small"></lightning-icon>
+                    {header}
+                </h3>
+            </div>
+            <div class="slds-col slds-large-size_4-of-12 right-column">
+                <c-timeline-filter
+                    lwc:if={filterIsActive}
+                    filter-properties={filterProperties}
+                    is-grouped={isGrouped}
+                    picklist-filter-1-label={picklistFilter1Label}
+                    picklist-filter-2-label={picklistFilter2Label}
+                    hide-my-activities-filter={hideMyActivitiesFilter}
+                    onfilterchange={handleFilter}
+                    log-event={logEvent}
+                    design={design}
+                ></c-timeline-filter>
             </div>
         </div>
         <div lwc:if={loading} class="slds-scrollable" style={loadingStyle}>

force-app/main/default/lwc/timelineGroup/slick.css

@@ -1,6 +1,6 @@
 .slds-accordion__section {
     border-bottom: 1px solid #767676;
-    margin: 1rem;
+    margin: 0.813rem 1rem 1rem 1rem;
     --slds-c-accordion-section-spacing-block-end: 0;
     --slds-c-accordion-section-spacing-block-start: 0;
     --slds-c-accordion-section-spacing-inline-end: 0;
@@ -30,6 +30,16 @@
     position: absolute;
     top: 100%;
     z-index: 0;
-    max-height: 1rem;
+    max-height: 1.75rem;
     margin-top: 0.1rem;
 }
+
+.custom-button {
+    padding: 0.5rem 0;
+    margin-bottom: 0.25rem;
+}
+
+.custom-header {
+    justify-content: center;
+    vertical-align: middle;
+}

force-app/main/default/lwc/timelineGroup/slick.html

@@ -1,9 +1,9 @@
 <template>
     <section class={accordionSectionClass}>
         <div class="slds-accordion__summary slds-var-p-bottom_small">
-            <h2 class="slds-accordion__summary-heading">
+            <h2 class="slds-accordion__summary-heading custom-header">
                 <button
-                    class="slds-button slds-button_reset slds-accordion__summary-action slds-var-p-vertical_xx-small"
+                    class="slds-button slds-button_reset slds-accordion__summary-action custom-button"
                     aria-expanded={isExpanded}
                     onclick={toggleButton}
                 >

force-app/main/default/lwc/timelineGroup/timelineGroup.js

@@ -66,7 +66,7 @@ export default class TimelineGroup extends LightningElement {
     }
 
     get accordionSectionClass() {
-        return this.isOpen ? 'slds-accordion__section slds-is-open' : 'slds-accordion__section slds-is-closed';
+        return `slds-accordion__section ${this.isOpen ? 'slds-is-open' : 'slds-is-closed'}`;
     }
 
     get isExpanded() {

force-app/main/default/lwc/timelineItem/sharedStyling.css

@@ -1,5 +1,5 @@
 .row {
-    margin-bottom: 1.4em;
+    margin-bottom: 1.5rem;
 }
 
 .table {

force-app/main/default/lwc/timelineItem/slick.css

@@ -9,7 +9,7 @@
 
 .cell-icon {
     margin-top: 0.35rem;
-    border: 0.15em solid white;
+    border: 0.2em solid white;
     --slds-c-icon-radius-border: 1rem;
 }