make all-day area collapse better

packages/core/src/styles/_scrollgrid.scss

@@ -57,8 +57,6 @@
 }
 
 
-
-
 .fc-scroller {
   position: relative; // for abs-positioned elements within
 }

packages/timegrid/src/TimeColsContent.tsx

@@ -79,7 +79,7 @@ export default class TimeColsContent extends BaseComponent<TimeColsContentProps>
           <tbody>
             <tr>
               {props.axis &&
-                <td class='fc-timegrid-col-axis' />
+                <td class='fc-timegrid-axis' />
               }
               {props.cells.map((cell, i) => (
                 <TimeCol

packages/timegrid/src/TimeColsSlats.tsx

@@ -182,7 +182,7 @@ const DEFAULT_SLAT_LABEL_FORMAT = {
 export function TimeColsAxisCell(props: TimeSlatMeta) {
   let classNames = [
     'fc-timegrid-slot',
-    'fc-timegrid-slot-axis',
+    'fc-timegrid-slot-label',
     props.isLabeled ? 'fc-scrollgrid-shrink' : 'fc-timegrid-slot-minor'
   ]
 
@@ -212,8 +212,8 @@ export function TimeColsAxisCell(props: TimeSlatMeta) {
             <RenderHook name='slotLabel' mountProps={mountProps} dynamicProps={dynamicProps} defaultInnerContent={renderInnerContent}>
               {(rootElRef, customClassNames, innerElRef, innerContent) => (
                 <td ref={rootElRef} class={classNames.concat(customClassNames).join(' ')} data-time={props.isoTimeStr}>
-                  <div class='fc-scrollgrid-shrink-frame'>
-                    <span className='fc-timegrid-slot-axis-cushion fc-scrollgrid-shrink-cushion' ref={innerElRef}>
+                  <div class='fc-timegrid-slot-label-frame fc-scrollgrid-shrink-frame'>
+                    <span className='fc-timegrid-slot-label-cushion fc-scrollgrid-shrink-cushion' ref={innerElRef}>
                       {innerContent}
                     </span>
                   </div>

packages/timegrid/src/TimeColsView.tsx

@@ -271,10 +271,9 @@ export default abstract class TimeColsView extends View {
         {(rootElRef, classNames, innerElRef, innerContent) => (
           <td ref={rootElRef} className={[
             'fc-timegrid-axis',
-            'fc-scrollgrid-shrink',
-            'fc-allday' // TODO: have RenderHook supply this?
+            'fc-scrollgrid-shrink'
           ].concat(classNames).join(' ')}>
-            <div class='fc-timegrid-axis-frame fc-scrollgrid-shrink-frame' style={{ height: rowHeight }}>
+            <div class={'fc-timegrid-axis-frame fc-scrollgrid-shrink-frame' + (rowHeight == null ? ' vgrow' : '')} style={{ height: rowHeight }}>
               <span class='fc-timegrid-axis-cushion fc-scrollgrid-shrink-cushion' ref={innerElRef}>
                 {innerContent}
               </span>

packages/timegrid/src/styles/_timegrid.scss

@@ -57,21 +57,47 @@
   border-top-style: dotted !important;
 }
 
-.fc .fc-timegrid-axis-frame {
-  display: flex;
-  align-items: center;
+.fc-timegrid-slot-label-cushion {
+  white-space: nowrap;
 }
 
-.fc .fc-timegrid-slot-axis {
-  vertical-align: middle;
+.fc-ltr {
+  .fc-timegrid-axis-frame,
+  .fc-timegrid-slot-label-frame {
+    text-align: right;
+  }
+}
+
+.fc-rtl {
+  .fc-timegrid-axis-frame,
+  .fc-timegrid-slot-label-frame {
+    text-align: left;
+  }
 }
 
 .fc-timegrid-axis-cushion,
-.fc-timegrid-slot-axis-cushion {
-  white-space: nowrap;
+.fc-timegrid-slot-label-cushion {
   padding: 0 4px;
 }
 
+.fc .fc-timegrid-slot-label { // vertical align the slots
+  vertical-align: middle;
+}
+
+
+
+.fc-timegrid-axis-frame {
+  overflow: hidden;
+  display: flex;
+  align-items: center; // vertical align
+  justify-content: flex-end; // horizontal align. matches text-align
+}
+
+.fc-timegrid-axis-cushion {
+  max-width: 60px;
+  flex-shrink: 0; // allows text to expand how it normally would, regardless of constrained width
+}
+
 
 
 .fc-timegrid-bg-harness {