Align card header buttons to match header direction

Author: pimterry

src/components/common/collapsing-buttons.tsx

@@ -8,6 +8,7 @@ import { useSize } from '../../util/ui';
 const VisibleButtonsContainer = styled.div`
     overflow: hidden;
     display: flex;
+    flex-direction: inherit;
 `;
 
 const HiddenButtonsWrapper = styled.div`
@@ -40,6 +41,11 @@ const ButtonContainer = styled.div`
 
     position: relative;
     display: flex;
+
+    /* Match the parent (typically card header) flex direction, but justify
+       content in the opposite direction */
+    flex-direction: inherit;
+    justify-content: flex-start;
 `;
 
 const MenuButton = styled(Icon)`

src/components/common/expand-shrink-button.tsx

@@ -11,7 +11,7 @@ export const ExpandShrinkButton = (p: { expanded: boolean, onClick: () => void }
         onClick={p.onClick}
         title={
             p.expanded
-                ? "Shrink this card, so you can see other details"
-                : "Expand this card to view it in more detail, hiding other details"
+                ? "Shrink this area, so you can see other details"
+                : "Expand this area to view it in more detail, hiding other areas"
         }
     />