style tweaks

packages/datatrak-web/src/features/Tasks/TaskPageHeader.tsx

@@ -27,6 +27,9 @@ const Wrapper = styled.div`
   display: flex;
   align-items: self-start;
   padding-inline-end: 2.7rem;
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    padding-inline-end: 0.5rem;
+  }
 `;
 
 const HeadingContainer = styled.div`
@@ -59,11 +62,6 @@ const ContentWrapper = styled.div`
   align-items: center;
   justify-content: flex-end;
   width: 100%;
-  ${({ theme }) => theme.breakpoints.down('xs')} {
-    padding-inline-start: 1rem;
-    flex-direction: column;
-    padding-inline-end: 0.6rem;
-  }
 `;
 
 export const TaskPageHeader = ({

packages/datatrak-web/src/features/Tasks/TasksTable/TasksTable.tsx

@@ -36,6 +36,11 @@ const Container = styled.div`
   }
 
   ${({ theme }) => theme.breakpoints.down('sm')} {
+    border: none;
+    border-radius: 0;
+    th.MuiTableCell-root {
+      border: none;
+    }
     table .MuiTableRow-head:nth-child(2) {
       display: none;
     }

packages/datatrak-web/src/layout/MainPageLayout.tsx

@@ -39,6 +39,7 @@ const useHeaderVisibility = () => {
     ROUTES.SURVEY_SELECT,
     ROUTES.ACCOUNT_SETTINGS,
     ROUTES.TASKS,
+    ROUTES.TASK_DETAILS,
   ];
 
   return !headerLessRoutePatterns.some(pathPattern => matchPath(pathPattern, pathname));

packages/datatrak-web/src/layout/TasksLayout.tsx

@@ -11,9 +11,12 @@ import { StickyMobileHeader } from './StickyMobileHeader.tsx';
 import { useIsMobile } from '../utils';
 
 const HeaderLessFullHeightContainer = styled.div`
-  height: calc(100vh - ${HEADER_HEIGHT} - ${TITLE_BAR_HEIGHT});
   display: flex;
   flex-direction: column;
+
+  ${({ theme }) => theme.breakpoints.up('sm')} {
+    height: calc(100vh - ${HEADER_HEIGHT} - ${TITLE_BAR_HEIGHT});
+  }
 `;
 
 const PageContainer = styled(BasePageContainer)`

packages/datatrak-web/src/views/Tasks/TasksDashboardPage.tsx

@@ -12,16 +12,11 @@ import { TasksContentWrapper } from '../../layout';
 import { TaskMetrics } from '../../components/TaskMetrics';
 
 const ButtonContainer = styled.div`
-  padding-block-end: 0.5rem;
-  margin-block-start: 1rem;
-  ${({ theme }) => theme.breakpoints.up('sm')} {
-    margin-inline-start: auto;
-    margin-block-start: 0;
-    padding-block-end: 0;
-  }
-  ${({ theme }) => theme.breakpoints.down('xs')} {
-    align-self: self-end;
-  }
+  //padding-block-end: 0.5rem;
+  //margin-block-start: 1rem;
+  //margin-inline-start: auto;
+  //margin-block-start: 0;
+  //padding-block-end: 0;
 `;
 
 const CreateButton = styled(Button).attrs({