update paths, set min width on header to prevent icon overlap on small screens

Author: savathoon

src/App.tsx

@@ -31,7 +31,7 @@ import ListTags from './pages/tags/List';
 import ListUsers from './pages/users/List';
 import NavItems from './components/NavItems';
 import NotFound from './pages/NotFound';
-import {ReadApp} from './pages/apps/app_detail';
+import {ReadApp} from './pages/apps/detail';
 import ReadGroup from './pages/groups/Read';
 import ReadTag from './pages/tags/Read';
 import ReadUser from './pages/users/Read';
@@ -95,7 +95,7 @@ function Dashboard() {
   };
 
   return (
-    <Box sx={{display: 'flex'}}>
+    <Box sx={{display: 'flex', minWidth: '20rem', overflowX: 'hidden'}}>
       <AppBar position="absolute" open={open}>
         <Toolbar
           sx={{

src/pages/apps/app_detail/app_header.tsx renamed to src/pages/apps/detail/header.tsx

@@ -9,12 +9,12 @@ import TagIcon from '@mui/icons-material/LocalOffer';
 import {useCurrentUser} from '../../../authentication';
 import {MoveTooltip} from '.';
 
-interface AppHeaderProps {
+interface AppsHeaderProps {
   app: App;
   moveTooltip: MoveTooltip;
 }
 
-const AppHeader: React.FC<AppHeaderProps> = ({app, moveTooltip}) => {
+const AppsHeader: React.FC<AppsHeaderProps> = ({app, moveTooltip}) => {
   const currentUser = useCurrentUser();
   const navigate = useNavigate();
 
@@ -25,7 +25,8 @@ const AppHeader: React.FC<AppHeaderProps> = ({app, moveTooltip}) => {
       <Paper
         sx={{
           p: 2,
-          height: 240,
+          height: '15rem',
+          minWidth: '20rem',
           display: 'flex',
           flexDirection: 'column',
           justifyContent: 'center',
@@ -73,4 +74,4 @@ const AppHeader: React.FC<AppHeaderProps> = ({app, moveTooltip}) => {
   );
 };
 
-export default AppHeader;
+export default AppsHeader;

src/pages/apps/app_detail/index.tsx renamed to src/pages/apps/detail/index.tsx

@@ -31,7 +31,7 @@ import CreateUpdateApp from '../CreateUpdate';
 import DeleteApp from '../Delete';
 import NotFound from '../../NotFound';
 import Loading from '../../../components/Loading';
-import AppHeader from './app_header';
+import AppsHeader from './header';
 
 function sortGroupMembers(
   [aUserId, aUsers]: [string, Array<OktaUserGroupMember>],
@@ -83,7 +83,7 @@ export const ReadApp = () => {
     <React.Fragment>
       <Container maxWidth="lg" sx={{mt: 4, mb: 4}}>
         <Grid container spacing={3}>
-          <AppHeader app={app} moveTooltip={moveTooltip} />
+          <AppsHeader app={app} moveTooltip={moveTooltip} />
           {isAccessAdmin(currentUser) || isAppOwnerGroupOwner(currentUser, app.id ?? '') ? (
             <Grid item xs={12}>
               <Paper