Fix: Modify permissions styling

src/app/utils/device-characteristics-telemetry.ts

@@ -1,4 +1,7 @@
 export function getBrowserScreenSize(browserWidth: number){
+  if (browserWidth >= 2560) {
+    return 'xxxxl';
+  }
   if(browserWidth >= 1920){
     return 'xxxl';
   }

src/app/views/query-runner/request/Request.tsx

@@ -127,7 +127,7 @@ const Request = (props: any) => {
     const heightInPx = requestHeight.replace('px', '').trim();
     const requestHeightInVh = convertPxToVh(parseFloat(heightInPx)).toString();
     const maxDeviceVerticalHeight = 90;
-    const dimen = { ...props.dimensions };
+    const dimen = { ...dimensions };
     dimen.request.height = requestHeightInVh;
     const response = maxDeviceVerticalHeight - parseFloat(requestHeightInVh.replace('vh', ''));
     dimen.response.height = response + 'vh';

src/app/views/query-runner/request/permissions/PanelList.tsx

@@ -77,14 +77,12 @@ const PanelList = ({ messages,
   });
 
   const searchValueChanged = (event: any, value?: string): void => {
-    let valueToSearch = '';
-    valueToSearch = value!;
-    setSearchValue(valueToSearch);
+    setSearchValue(value!);
     shouldGenerateGroups.current = true;
     setSearchStarted((search) => !search);
     let filteredPermissions = scopes.data.fullPermissions;
-    if (valueToSearch) {
-      const keyword = valueToSearch.toLowerCase();
+    if (value) {
+      const keyword = value.toLowerCase();
 
       filteredPermissions = fullPermissions.filter((permission: IPermission) => {
         const name = permission.value.toLowerCase();

src/app/views/query-runner/request/permissions/Permission.styles.ts

@@ -67,9 +67,7 @@ export const permissionStyles = (theme: ITheme) => {
       cellTitle: {
         display: 'flex',
         flex: 1,
-        position: 'relative' as 'relative',
-        right: '4px',
-        textAlign: 'center'
+        textAlign: 'left'
       }
     },
     cellTitleStyles: {
@@ -82,7 +80,7 @@ export const permissionStyles = (theme: ITheme) => {
       root: {
         height: '40px',
         lineHeight: '20px',
-        textAlign: 'center',
+        textAlign: 'left',
         marginTop: '7px'
       }
     }

src/app/views/query-runner/request/permissions/Permission.tsx

@@ -138,11 +138,11 @@ export const Permission = (permissionProps?: IPermissionProps): JSX.Element => {
 
   const adminLabel = (item: any): JSX.Element => {
     if (item.isAdmin) {
-      return <div style={{ textAlign: 'center' }}>
+      return <div style={{ textAlign: 'left', paddingLeft:'10px' }}>
         <Label><FormattedMessage id='Yes' /></Label>
       </div>;
     } else {
-      return <div style={{ textAlign: 'center' }}>
+      return <div style={{ textAlign: 'left', paddingLeft: '10px' }}>
         <Label><FormattedMessage id='No' /></Label>
       </div>;
     }
@@ -151,7 +151,7 @@ export const Permission = (permissionProps?: IPermissionProps): JSX.Element => {
   const consentedButton = (consented: boolean, item: any, hostId: string): JSX.Element => {
     if (consented) {
       if(userHasRequiredPermissions()){
-        return <PrimaryButton onClick={() => handleRevoke(item)} style={{width: '100px', textAlign:'center'}}>
+        return <PrimaryButton onClick={() => handleRevoke(item)} style={{width: '100px', textAlign:'left'}}>
           <FormattedMessage id='Revoke' />
         </PrimaryButton>;
       }
@@ -196,14 +196,14 @@ export const Permission = (permissionProps?: IPermissionProps): JSX.Element => {
   const permissionConsentTypeLabel = (permissionInAllPrincipal : boolean) : JSX.Element => {
     if(permissionInAllPrincipal){
       return (
-        <div style={{textAlign: 'center'}}>
+        <div style={{textAlign: 'left', paddingLeft: '10px'}}>
           <Label>{translateMessage('AllPrincipal')}</Label>
         </div>
       )
     }
     else{
       return (
-        <div style={{textAlign: 'center'}}>
+        <div style={{textAlign: 'left', paddingLeft: '10px'}}>
           <Label>{translateMessage('Principal')}</Label>
         </div>
       )
@@ -260,7 +260,7 @@ export const Permission = (permissionProps?: IPermissionProps): JSX.Element => {
           fieldName: 'consentDescription',
           isResizable: true,
           minWidth: (tokenPresent) ? columnSizes.minWidth : 600,
-          maxWidth: (tokenPresent) ? columnSizes.maxWidth : 1000,
+          maxWidth: (tokenPresent) ? columnSizes.maxWidth : 750,
           isMultiline: true,
           columnActionsMode: 0
         }
@@ -272,8 +272,8 @@ export const Permission = (permissionProps?: IPermissionProps): JSX.Element => {
         key: 'isAdmin',
         name: translateMessage('Admin consent required'),
         fieldName: 'isAdmin',
-        minWidth: (tokenPresent) ? 150 : 200,
-        maxWidth: (tokenPresent) ? 200 : 300,
+        minWidth:  150,
+        maxWidth:  200,
         ariaLabel: translateMessage('Administrator permission'),
         isMultiline: true,
         headerClassName: 'permissionHeader',
@@ -289,8 +289,8 @@ export const Permission = (permissionProps?: IPermissionProps): JSX.Element => {
           name: translateMessage('Status'),
           isResizable: false,
           fieldName: 'consented',
-          minWidth: 100,
-          maxWidth: 120,
+          minWidth: 90,
+          maxWidth: 100,
           onRenderHeader: () => renderColumnHeader('Status'),
           styles: columnCellStyles
         },
@@ -303,8 +303,8 @@ export const Permission = (permissionProps?: IPermissionProps): JSX.Element => {
         name: translateMessage('Consent type'),
         isResizable: false,
         fieldName: 'consentType',
-        minWidth: 100,
-        maxWidth: 100,
+        minWidth: 110,
+        maxWidth: 120,
         onRenderHeader: () => renderColumnHeader('Consent type'),
         styles: columnCellStyles,
         ariaLabel: translateMessage('Permission consent type')
@@ -345,16 +345,17 @@ export const Permission = (permissionProps?: IPermissionProps): JSX.Element => {
       )
     }
 
-    return (<div style={{ textAlign: 'center'}}>
+    return (<div style={{ textAlign: 'left', display: 'flex'}}>
       <IconButton
         iconProps={infoIcon}
         className={styles.iconButton}
         id={'buttonId'}
         ariaLabel={translateMessage(headerText)}
         onClick={() => openExternalWebsite(headerText)}
+        styles={{root: { position: 'relative', right: '1px'}}}
       >
       </IconButton>
-      <span style={{position: 'relative', left: '4px', margin: '-8px'}}>
+      <span style={{paddingTop: '4px' }}>
         {translateMessage(headerText)}
       </span>
     </div>)

src/app/views/query-runner/request/permissions/util.ts

@@ -37,17 +37,22 @@ export function setDescriptionColumnSize(): IDescriptionSize {
     case 'xl':
       return {
         minWidth: 240,
-        maxWidth: 390
+        maxWidth: 370
       }
     case 'xxl':
       return {
-        minWidth: 390,
-        maxWidth: 490
+        minWidth: 370,
+        maxWidth: 420
       }
     case 'xxxl':
       return {
         minWidth: 490,
-        maxWidth: 590
+        maxWidth: 550
+      }
+    case 'xxxxl':
+      return {
+        minWidth: 500,
+        maxWidth: 1000
       }
     default:
       return {