Not easy to use office hour/Time field on low resolution screen

Uploading an alternative patch, using min-width: fit-content for several descendant selectors of .field--type-office-hours (instead of a hardcoded px amount for specific selects).

I also went back and forth a ton between always using display: flow-root for the office_hours table (as opposed to only at widths below 1025px). On the one hand, without overflow handling, the table still risks covering up metadata fields on the node edit page, depending on one's viewport width (though at least the two week-based widgets seem to be in collapsible <details>). On the other hand, when display: flow-root is used, (A) on some browsers and viewport widths, it might not be at all apparent the table has scrollable contents off to the right, and (B) if Chosen JS is used, the dropdowns nearer the bottom get cut off (well, they actually increase the scrollable height, but they're non-trivial to select from).

I tried to address problem A by seeing if I couldn't apply Lea Verou's scrolling shadows (well, the horizontal version), but between unreliable parent selectors and/or some non-transparent background colors, I couldn't get something working (including several attempts using higher z-index'ed pseudo-content).

Thanks for the patch, applied

Automatically closed - issue fixed for 2 weeks with no activity.