Make publish announcement card and tabs responsive

src/components/PublishAnnouncementCard/styles.js

@@ -19,12 +19,17 @@ const desktop = {
 // ========== Mobile ==========
 const mobilePublishAnnouncement = {
   cursor: 'pointer',
+  padding: '10px',
+  width: '100%',
   ':hover': {
     color: '#32A041',
   },
 };
 
-const mobileCard = {};
+const mobileCard = {
+  width: '100%',
+  padding: '10px ',
+};
 
 const mobile = {
   publishAnnouncement: mobilePublishAnnouncement,

src/screens/professor/Classroom/Header/index.js

@@ -43,7 +43,7 @@ function Header({
           value={selectedTabOption}
           onChange={onSelectTabOption}
           aria-label="Tabs para informações da disciplina"
-          variant="fullWidth"
+          variant={layoutType === 'mobile' ? 'scrollable' : 'fullWidth'}
           sx={tabs}
         >
           {Object.values(TAB_OPTIONS).map(option => (

src/screens/professor/Classroom/Header/styles.js

@@ -6,14 +6,16 @@ const desktopTitle = {
 const desktopPaper = classColor => ({
   width: '100%',
   borderTop: `5px solid ${classColor}`,
-  padding: '20px',
+  padding: '30px',
 });
 
 const desktopTabs = {
+  display: 'flex',
   marginLeft: '-20px',
   marginRight: '-20px',
   marginBottom: '-20px',
   marginTop: '30px',
+  padding: '10px',
 };
 
 const desktopAvatar = {