diff --git a/src/commons/addons/elements/search/search-bar.tsx b/src/commons/addons/elements/search/search-bar.tsx index 2b46673d8..d4138f196 100644 --- a/src/commons/addons/elements/search/search-bar.tsx +++ b/src/commons/addons/elements/search/search-bar.tsx @@ -55,9 +55,7 @@ const SearchBar: React.FC = ({ const element = useRef(); const [value, setValue] = useState(initValue); - const getInputEl = () => { - return element.current.querySelector('input'); - }; + const getInputEl = () => element.current.querySelector('input'); // handler[onchange]: textfield change handler. // track value of filter.. diff --git a/src/commons/components/app/AppContextProvider.tsx b/src/commons/components/app/AppContextProvider.tsx index 1adc35969..c49bfe8e2 100644 --- a/src/commons/components/app/AppContextProvider.tsx +++ b/src/commons/components/app/AppContextProvider.tsx @@ -53,7 +53,7 @@ const getInitialTheme = (defaultTheme, prefersDarkMode) => { const useStyles = makeStyles(theme => ({ snackroot: { - [theme.breakpoints.only('xs')]: { wordBreak: 'break-all' } + [theme.breakpoints.only('xs')]: { wordBreak: 'break-word' } } })); diff --git a/src/commons/components/layout/LayoutProvider.tsx b/src/commons/components/layout/LayoutProvider.tsx index 4ec0b9202..7c0672658 100644 --- a/src/commons/components/layout/LayoutProvider.tsx +++ b/src/commons/components/layout/LayoutProvider.tsx @@ -30,7 +30,8 @@ const useNewStyles = makeStyles(theme => ({ flexDirection: 'column', position: 'relative', flex: 1, - height: '100%' + height: '100%', + width: '100%' }, appVerticalRightContent: { height: 'auto', diff --git a/src/components/routes/admin/error_viewer.tsx b/src/components/routes/admin/error_viewer.tsx index a0573b7b8..0b5a4755b 100644 --- a/src/components/routes/admin/error_viewer.tsx +++ b/src/components/routes/admin/error_viewer.tsx @@ -29,7 +29,8 @@ const useStyles = makeStyles(theme => ({ fontStyle: 'italic', paddingTop: theme.spacing(0.5), display: 'flex', - flexWrap: 'wrap' + flexWrap: 'wrap', + justifyContent: 'flex-end' }, drawerPaper: { width: '80%', @@ -134,7 +135,7 @@ function ErrorDetail({ error }) {
-
+
{error.sha256} copy(error.sha256, 'drawerTop')} />
diff --git a/src/components/routes/admin/service_detail/container_card.tsx b/src/components/routes/admin/service_detail/container_card.tsx index 9a5ebd046..dcfaf2361 100644 --- a/src/components/routes/admin/service_detail/container_card.tsx +++ b/src/components/routes/admin/service_detail/container_card.tsx @@ -20,14 +20,13 @@ const useStyles = makeStyles(theme => ({ } }, card_title: { - fontSize: 'large', + fontSize: 'larger', fontFamily: 'monospace' }, label: { fontWeight: 500 }, mono: { - fontSize: 'larger', fontFamily: 'monospace' } })); diff --git a/src/components/routes/admin/site_map.tsx b/src/components/routes/admin/site_map.tsx index 89e4bc86f..8434bee89 100644 --- a/src/components/routes/admin/site_map.tsx +++ b/src/components/routes/admin/site_map.tsx @@ -29,7 +29,9 @@ const StyledTableCell = withStyles((theme: Theme) => root: { paddingRight: theme.spacing(1), paddingLeft: theme.spacing(1), - wordBreak: 'break-all' + [theme.breakpoints.up('md')]: { + wordBreak: 'break-word' + } }, head: { backgroundColor: theme.palette.type === 'dark' ? '#404040' : '#EEE', @@ -107,32 +109,36 @@ export default function SiteMap() { )} - {path.req_priv && - path.req_priv.map((priv, pid) => ( - - ))} +
+ {path.req_priv && + path.req_priv.map((priv, pid) => ( + + ))} +
- {path.required_type && - path.required_type.map((req, rid) => ( - - ))} +
+ {path.required_type && + path.required_type.map((req, rid) => ( + + ))} +
))} diff --git a/src/components/routes/admin/users.tsx b/src/components/routes/admin/users.tsx index 47314903b..741cd2ff2 100644 --- a/src/components/routes/admin/users.tsx +++ b/src/components/routes/admin/users.tsx @@ -55,7 +55,8 @@ const useStyles = makeStyles(theme => ({ fontStyle: 'italic', paddingTop: theme.spacing(0.5), display: 'flex', - flexWrap: 'wrap' + flexWrap: 'wrap', + justifyContent: 'flex-end' }, drawerPaper: { width: '80%', diff --git a/src/components/routes/alerts/alert-details.tsx b/src/components/routes/alerts/alert-details.tsx index 8bde4c867..ef1b7301b 100644 --- a/src/components/routes/alerts/alert-details.tsx +++ b/src/components/routes/alerts/alert-details.tsx @@ -263,7 +263,7 @@ const AlertDetails: React.FC = ({ id, alert }) => { {item ? item.file.name : } - + {item ? ( ) : ( @@ -283,7 +283,7 @@ const AlertDetails: React.FC = ({ id, alert }) => { MD5: - + {item ? item.file.md5 : } @@ -295,7 +295,7 @@ const AlertDetails: React.FC = ({ id, alert }) => { SHA1: - + {item ? item.file.sha1 : } @@ -307,7 +307,7 @@ const AlertDetails: React.FC = ({ id, alert }) => { SHA256: - + {item ? item.file.sha256 : } @@ -320,7 +320,7 @@ const AlertDetails: React.FC = ({ id, alert }) => { {t('metadata')}
- 
+              
                 {item ? (
                   Object.keys(item.metadata).map(k => (
                     
diff --git a/src/components/routes/alerts/alert-list-item-actions.tsx b/src/components/routes/alerts/alert-list-item-actions.tsx
index 12a0171ba..b91ecef85 100644
--- a/src/components/routes/alerts/alert-list-item-actions.tsx
+++ b/src/components/routes/alerts/alert-list-item-actions.tsx
@@ -254,7 +254,7 @@ const AlertListItemActions: React.FC = React.memo(
               groupBy ? (
                 <>
                   {t('actions.takeownershipdiag.content.grouped')}
-                  
+                  
                     {`${groupBy}: ${getValueFromPath(item, groupBy)}`}
                   
                 
diff --git a/src/components/routes/alerts/alert-list-item.tsx b/src/components/routes/alerts/alert-list-item.tsx
index 81718ac1d..cb1d243a0 100644
--- a/src/components/routes/alerts/alert-list-item.tsx
+++ b/src/components/routes/alerts/alert-list-item.tsx
@@ -47,7 +47,7 @@ const AlertListItem: React.FC = ({ item }) => {
         
           
           {item.group_count && {item.group_count}x}
-          {item.file.name}
+          {item.file.name}
         
         
           {item.verdict.malicious.length > item.verdict.non_malicious.length ? (
diff --git a/src/components/routes/alerts/alerts-workflow-actions.tsx b/src/components/routes/alerts/alerts-workflow-actions.tsx
index e657dbd18..fc5fb8296 100644
--- a/src/components/routes/alerts/alerts-workflow-actions.tsx
+++ b/src/components/routes/alerts/alerts-workflow-actions.tsx
@@ -83,7 +83,7 @@ const AlertsWorkflowActions: React.FC = ({
       

         
 ({
     fontStyle: 'italic',
     paddingTop: theme.spacing(0.5),
     display: 'flex',
-    flexWrap: 'wrap'
+    flexWrap: 'wrap',
+    justifyContent: 'flex-end'
   },
   drawerPaper: {
     width: '80%',
diff --git a/src/components/routes/manage/safelist.tsx b/src/components/routes/manage/safelist.tsx
index 82f452857..579d31c43 100644
--- a/src/components/routes/manage/safelist.tsx
+++ b/src/components/routes/manage/safelist.tsx
@@ -27,7 +27,8 @@ const useStyles = makeStyles(theme => ({
     fontStyle: 'italic',
     paddingTop: theme.spacing(0.5),
     display: 'flex',
-    flexWrap: 'wrap'
+    flexWrap: 'wrap',
+    justifyContent: 'flex-end'
   },
   drawerPaper: {
     width: '80%',
diff --git a/src/components/routes/manage/safelist_detail.tsx b/src/components/routes/manage/safelist_detail.tsx
index acd4fbd64..e4e7d50e7 100644
--- a/src/components/routes/manage/safelist_detail.tsx
+++ b/src/components/routes/manage/safelist_detail.tsx
@@ -194,10 +194,10 @@ const SafelistDetail = ({ safelist_id, close }: SafelistDetailProps) => {
       )}
       

         

-          
+          
             
               {safelist ? t(`title.${safelist.type}`) : t('title')}
-              
+              
                 {safelist ? safelist_id || id : }
               
             
diff --git a/src/components/routes/manage/signature_sources.tsx b/src/components/routes/manage/signature_sources.tsx
index d61e906bc..9d52df15c 100644
--- a/src/components/routes/manage/signature_sources.tsx
+++ b/src/components/routes/manage/signature_sources.tsx
@@ -61,7 +61,7 @@ const useStyles = makeStyles(theme => ({
     }
   },
   card_title: {
-    fontSize: 'large',
+    fontSize: 'larger',
     fontFamily: 'monospace'
   },
   drawerPaper: {
@@ -75,15 +75,8 @@ const useStyles = makeStyles(theme => ({
     fontWeight: 500
   },
   mono: {
-    fontSize: 'larger',
     fontFamily: 'monospace'
   },
-  searchresult: {
-    fontStyle: 'italic',
-    paddingTop: theme.spacing(0.5),
-    display: 'flex',
-    flexWrap: 'wrap'
-  },
   title: {
     cursor: 'pointer',
     '&:hover, &:focus': {
diff --git a/src/components/routes/manage/signatures.tsx b/src/components/routes/manage/signatures.tsx
index 9def3ec4c..26778f178 100644
--- a/src/components/routes/manage/signatures.tsx
+++ b/src/components/routes/manage/signatures.tsx
@@ -27,7 +27,8 @@ const useStyles = makeStyles(theme => ({
     fontStyle: 'italic',
     paddingTop: theme.spacing(0.5),
     display: 'flex',
-    flexWrap: 'wrap'
+    flexWrap: 'wrap',
+    justifyContent: 'flex-end'
   },
   drawerPaper: {
     width: '80%',
diff --git a/src/components/routes/manage/workflows.tsx b/src/components/routes/manage/workflows.tsx
index 8d2957d0a..b02dbd1eb 100644
--- a/src/components/routes/manage/workflows.tsx
+++ b/src/components/routes/manage/workflows.tsx
@@ -27,7 +27,8 @@ const useStyles = makeStyles(theme => ({
     fontStyle: 'italic',
     paddingTop: theme.spacing(0.5),
     display: 'flex',
-    flexWrap: 'wrap'
+    flexWrap: 'wrap',
+    justifyContent: 'flex-end'
   },
   drawerPaper: {
     width: '80%',
diff --git a/src/components/routes/search.tsx b/src/components/routes/search.tsx
index a83a44c2c..9cac94fce 100644
--- a/src/components/routes/search.tsx
+++ b/src/components/routes/search.tsx
@@ -299,7 +299,15 @@ function Search({ index }: SearchProps) {
               
             
           )}
-          

+          

             {resMap[tab] && resMap[tab].total !== 0 && (index || id) && (
               

                 
diff --git a/src/components/routes/submission/report.tsx b/src/components/routes/submission/report.tsx
index 2f8f15e3c..46e6af768 100644
--- a/src/components/routes/submission/report.tsx
+++ b/src/components/routes/submission/report.tsx
@@ -686,7 +686,7 @@ export default function SubmissionReport() {
                 xs={8}
                 md={9}
                 lg={10}
-                style={{ fontFamily: 'monospace', fontSize: 'larger', wordBreak: 'break-word' }}
+                style={{ fontFamily: 'monospace',  wordBreak: 'break-word' }}
               >
                 {report ? report.file_info.md5 : }
               
@@ -699,7 +699,7 @@ export default function SubmissionReport() {
                 xs={8}
                 md={9}
                 lg={10}
-                style={{ fontFamily: 'monospace', fontSize: 'larger', wordBreak: 'break-word' }}
+                style={{ fontFamily: 'monospace',  wordBreak: 'break-word' }}
               >
                 {report ? report.file_info.sha1 : }
               
@@ -712,7 +712,7 @@ export default function SubmissionReport() {
                 xs={8}
                 md={9}
                 lg={10}
-                style={{ fontFamily: 'monospace', fontSize: 'larger', wordBreak: 'break-word' }}
+                style={{ fontFamily: 'monospace',  wordBreak: 'break-word' }}
               >
                 {report ? report.file_info.sha256 : }
               
@@ -725,7 +725,7 @@ export default function SubmissionReport() {
                 xs={8}
                 md={9}
                 lg={10}
-                style={{ fontFamily: 'monospace', fontSize: 'larger', wordBreak: 'break-word' }}
+                style={{ fontFamily: 'monospace',  wordBreak: 'break-word' }}
               >
                 {report ? report.file_info.ssdeep : }
               
diff --git a/src/components/routes/submissions.tsx b/src/components/routes/submissions.tsx
index 48db218ae..c9ab0fb7e 100644
--- a/src/components/routes/submissions.tsx
+++ b/src/components/routes/submissions.tsx
@@ -25,6 +25,7 @@ const useStyles = makeStyles(theme => ({
     fontStyle: 'italic',
     paddingTop: theme.spacing(0.5),
     display: 'flex',
+    justifyContent: 'flex-end',
     flexWrap: 'wrap'
   }
 }));
diff --git a/src/components/visual/DivTable.tsx b/src/components/visual/DivTable.tsx
index 78a87f8f7..d653e2086 100644
--- a/src/components/visual/DivTable.tsx
+++ b/src/components/visual/DivTable.tsx
@@ -16,8 +16,24 @@ import { Link, useHistory, useLocation } from 'react-router-dom';
 const StyledTableCell = withStyles((theme: Theme) =>
   createStyles({
     root: {
-      paddingRight: '8px',
-      paddingLeft: '8px'
+      paddingRight: theme.spacing(1),
+      paddingLeft: theme.spacing(1)
+    },
+    head: {
+      backgroundColor: theme.palette.type === 'dark' ? '#404040' : '#EEE',
+      whiteSpace: 'nowrap'
+    }
+  })
+)(TableCell);
+
+const BreakableTableCell = withStyles((theme: Theme) =>
+  createStyles({
+    root: {
+      paddingRight: theme.spacing(1),
+      paddingLeft: theme.spacing(1),
+      [theme.breakpoints.up('md')]: {
+        wordBreak: 'break-word'
+      }
     },
     head: {
       backgroundColor: theme.palette.type === 'dark' ? '#404040' : '#EEE',
@@ -28,17 +44,24 @@ const StyledTableCell = withStyles((theme: Theme) =>
 
 type CellProps = {
   children?: React.ReactNode;
+  breakable?: boolean;
   [key: string]: any;
 };
 
-export const DivTableCell = ({ children, ...other }: CellProps) => (
-  
-    {children}
-  
-);
+export const DivTableCell = ({ children, breakable, ...other }: CellProps) =>
+  breakable ? (
+    
+      {children}
+    
+  ) : (
+    
+      {children}
+    
+  );
 
 DivTableCell.defaultProps = {
-  children: null
+  children: null,
+  breakable: false
 };
 
 export const SortableHeaderCell = ({ children, sortField, allowSort = true, ...other }) => {
diff --git a/src/components/visual/FileDropper.tsx b/src/components/visual/FileDropper.tsx
index 3ce380993..17098e99d 100644
--- a/src/components/visual/FileDropper.tsx
+++ b/src/components/visual/FileDropper.tsx
@@ -56,8 +56,8 @@ export default function FileDropper({ file, setFile, disabled }: FileDropperProp
     >
       
       
-      

-        
+      

+        
           {isDragActive && !disabled ? t('file.drophere') : file ? file.name : t('file.dragzone')}
         
         {file && (!isDragActive || disabled) && (
diff --git a/src/components/visual/ResultCard/result_section.tsx b/src/components/visual/ResultCard/result_section.tsx
index 1ce6b40a7..b78746fb6 100644
--- a/src/components/visual/ResultCard/result_section.tsx
+++ b/src/components/visual/ResultCard/result_section.tsx
@@ -51,9 +51,10 @@ const useTreeItemStyles = makeStyles((theme: Theme) => ({
     '&:focus > .MuiTreeItem-content, &$root.Mui-selected > .MuiTreeItem-content': {
       backgroundColor: 'transparent'
     },
-    '&:focus > .MuiTreeItem-content .MuiTreeItem-label, &:hover > .MuiTreeItem-content .MuiTreeItem-label, &$root.Mui-selected > .MuiTreeItem-content .MuiTreeItem-label': {
-      backgroundColor: 'transparent'
-    }
+    '&:focus > .MuiTreeItem-content .MuiTreeItem-label, &:hover > .MuiTreeItem-content .MuiTreeItem-label, &$root.Mui-selected > .MuiTreeItem-content .MuiTreeItem-label':
+      {
+        backgroundColor: 'transparent'
+      }
   },
   suspicious: {
     backgroundColor: theme.palette.type === 'dark' ? '#654312' : '#ffedd4'
@@ -75,7 +76,6 @@ const MemDumpBody = ({ body }) => {
         borderRadius: '4px',
         padding: '4px',
         whiteSpace: 'pre-wrap',
-        fontSize: '1rem',
         wordBreak: 'break-word',
         margin: '0.25rem 0'
       }}
@@ -203,7 +203,6 @@ const JSONBody = ({ body }) => {
         backgroundColor: theme.palette.type === 'dark' ? '#FFFFFF05' : '#00000005',
         border: `1px solid ${theme.palette.divider}`,
         borderRadius: '4px',
-        fontSize: '1rem',
         padding: '4px'
       }}
     />
@@ -333,7 +332,9 @@ const StyledTableCell = withStyles((theme: Theme) =>
       backgroundColor: theme.palette.type === 'dark' ? '#404040' : '#EEE'
     },
     body: {
-      wordBreak: 'break-word'
+      [theme.breakpoints.up('md')]: {
+        wordBreak: 'break-word'
+      }
     }
   })
 )(TableCell);
diff --git a/src/components/visual/SearchResult/alerts.tsx b/src/components/visual/SearchResult/alerts.tsx
index 0dae13b0a..1f57f59fe 100644
--- a/src/components/visual/SearchResult/alerts.tsx
+++ b/src/components/visual/SearchResult/alerts.tsx
@@ -106,7 +106,7 @@ const WrappedAlertsTable: React.FC = ({ alertResults, allowSor
                 
                   
                 
-                {alert.file.sha256}
+                {alert.file.sha256}
                 {alert.status}
                 {alert.type}
                 {c12nDef.enforce && (
diff --git a/src/components/visual/SearchResult/files.tsx b/src/components/visual/SearchResult/files.tsx
index aa456a98b..ec742967f 100644
--- a/src/components/visual/SearchResult/files.tsx
+++ b/src/components/visual/SearchResult/files.tsx
@@ -95,7 +95,7 @@ const WrappedFilesTable: React.FC = ({ fileResults, allowSort =
                   
                 
                 {file.seen.count}
-                {file.sha256}
+                {file.sha256}
                 {file.type}
                 {file.size}
                 {c12nDef.enforce && (
diff --git a/src/components/visual/SearchResult/results.tsx b/src/components/visual/SearchResult/results.tsx
index 41053d5ab..ac26b5df0 100644
--- a/src/components/visual/SearchResult/results.tsx
+++ b/src/components/visual/SearchResult/results.tsx
@@ -93,7 +93,7 @@ const WrappedResultsTable: React.FC = ({ resultResults, allow
                 
                   
                 
-                {result.id.substring(0, 64)}
+                {result.id.substring(0, 64)}
                 {result.response.service_name}
                 {c12nDef.enforce && (
                   
diff --git a/src/components/visual/SearchResult/safelist.tsx b/src/components/visual/SearchResult/safelist.tsx
index d43e0455a..4111a31ea 100644
--- a/src/components/visual/SearchResult/safelist.tsx
+++ b/src/components/visual/SearchResult/safelist.tsx
@@ -113,10 +113,10 @@ const WrappedSafelistTable: React.FC = ({
                   
                 
                 {sl_item.type}
-                
+                
                   {sl_item.type === 'file' ? sl_item.id : `${sl_item.tag.type} - ${maxLenStr(sl_item.tag.value, 100)}`}
                 
-                {sl_item.sources.name.join(' | ')}
+                {sl_item.sources.name.join(' | ')}
                 {c12nDef.enforce && (
                   
                     
diff --git a/src/components/visual/SearchResult/service.tsx b/src/components/visual/SearchResult/service.tsx
index 2f544612f..a37ac7aee 100644
--- a/src/components/visual/SearchResult/service.tsx
+++ b/src/components/visual/SearchResult/service.tsx
@@ -78,7 +78,7 @@ const WrappedServiceTable: React.FC = ({ serviceResults, upda
                 {result.version}
                 {result.category}
                 {result.stage}
-                {result.accepts}
+                {result.accepts}
                 
                   {result.enabled ?  : }
                 
diff --git a/src/components/visual/SearchResult/submissions.tsx b/src/components/visual/SearchResult/submissions.tsx
index 749abc1a3..02a0b90f8 100644
--- a/src/components/visual/SearchResult/submissions.tsx
+++ b/src/components/visual/SearchResult/submissions.tsx
@@ -106,9 +106,7 @@ const WrappedSubmissionsTable: React.FC = ({ submissionRe
                 
                   
                 
-                
-                  {maxLenStr(submission.params.description, 150)}
-                
+                {maxLenStr(submission.params.description, 150)}
                 {submission.params.submitter}
                 {submission.file_count}
                 {c12nDef && c12nDef.enforce && (
diff --git a/src/components/visual/Table/enhanced_table.tsx b/src/components/visual/Table/enhanced_table.tsx
index 0f05e2b81..962dbb2bb 100644
--- a/src/components/visual/Table/enhanced_table.tsx
+++ b/src/components/visual/Table/enhanced_table.tsx
@@ -294,7 +294,9 @@ const useStyles = makeStyles((theme: Theme) =>
       paddingBottom: theme.spacing(1.5)
     },
     break: {
-      wordBreak: 'break-word'
+      [theme.breakpoints.up('md')]: {
+        wordBreak: 'break-word'
+      }
     }
   })
 );