CardHeaderWithResponsibleActions: make action fill the available space

This makes it possible to add come content right next to title,
and some more action to the right side.

Author: csillag

src/app/components/CardHeaderWithResponsiveActions/index.tsx

@@ -2,6 +2,16 @@ import CardHeader, { cardHeaderClasses } from '@mui/material/CardHeader'
 import { styled } from '@mui/material/styles'
 
 export const CardHeaderWithResponsiveActions = styled(CardHeader)(({ theme }) => ({
+  [`.${cardHeaderClasses.content}`]: {
+    flex: 0,
+    textWrap: 'nowrap',
+  },
+  [`.${cardHeaderClasses.action}`]: {
+    marginLeft: theme.spacing(4),
+    flex: 1,
+    alignSelf: 'auto',
+    textAlign: 'end',
+  },
   [theme.breakpoints.down('md')]: {
     display: 'inline',
     alignItems: 'flex-start',