removed hardcoded CSS values

frontend/src/App.css

@@ -1,84 +1,7 @@
 .filetable {
-  /* width: calc(-360px + 100dvw); */
-  height: calc(-350px + 100dvh);
   border: 1px solid #d1d5db;
+  width: 95% !important;
 }
-
-.fileTableWithExpansion {
-  width: calc(-640px + 100dvw) !important;
-  height: calc(-350px + 100dvh);
-  border: 1px solid #d1d5db;
-}
-
-.fileTableWithBothDrawers {
-  width: calc(-650px + 100dvw) !important;
-  height: calc(-350px + 100dvh);
-  border: 1px solid #d1d5db;
-}
-
-.fileTableWithExpansion .ndl-div-table {
-  width: max-content !important;
-}
-
-.filetable .ndl-div-table {
-  width: max-content !important;
-}
-
-.contentWithExpansion {
-  width: calc(-807px + 100dvw);
-  height: calc(100dvh - 58px);
-  padding: 3px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 5px;
-  position: relative;
-}
-
-.contentWithOneExpansion {
-  width: calc(-550px + 100dvw);
-  height: calc(100dvh - 58px);
-  padding: 3px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 5px;
-  position: relative;
-}
-
-.contentWithBothDrawers {
-  width: calc(-786px + 100dvw);
-  height: calc(100dvh - 58px);
-  padding: 3px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 5px;
-  position: relative;
-}
-
-.contentWithChatBot {
-  width: calc(-512px + 100dvw);
-  height: calc(100dvh - 58px);
-  padding: 3px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 5px;
-  position: relative;
-}
-
-.contentWithDropzoneExpansion {
-  width: calc(100% - 422px);
-  height: calc(100dvh - 58px);
-  padding: 3px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 5px;
-  position: relative;
-}
-
 .s3Container {
   display: flex;
   align-items: center;
@@ -408,4 +331,28 @@
   z-index: 111;
   opacity: 0.8;
   background-color: rgb(201 201 201 / 40%);
+}
+.layout-wrapper{
+  display: grid;
+  grid-template-rows: auto;
+  grid-template-columns: 64px 1fr minmax(min-content,4fr) 1.4fr 64px;
+  max-height: calc(100vh - 58px);
+  max-width: 100%;
+}
+.layout-wrapper.drawerdropzoneclosed{
+  grid-template-columns: 64px 4fr 1.1fr 64px;
+
+}
+.layout-wrapper.drawerchatbotclosed{
+  grid-template-columns: 64px 0.6fr minmax(min-content,4fr) 64px;
+}
+.layout-wrapper.drawerclosed{
+  grid-template-columns: 64px minmax(min-content,4fr) 64px;
+}
+.main-content-wrapper{
+  display: flex;
+  flex-direction: column;
+  max-width: 100%;
+  position: relative;
+  height: 100%;
 }

frontend/src/components/Content.tsx

@@ -41,8 +41,6 @@ const ConfirmationDialog = lazy(() => import('./Popups/LargeFilePopUp/Confirmati
 let afterFirstRender = false;
 
 const Content: React.FC<ContentProps> = ({
-  isLeftExpanded,
-  isRightExpanded,
   isSchema,
   setIsSchema,
   showEnhancementDialog,
@@ -267,7 +265,7 @@ const Content: React.FC<ContentProps> = ({
         fileItem.retryOption ?? '',
         fileItem.sourceUrl,
         localStorage.getItem('accesskey'),
-        localStorage.getItem('secretkey'),
+        atob(localStorage.getItem('secretkey')??''),
         fileItem.name ?? '',
         fileItem.gcsBucket ?? '',
         fileItem.gcsBucketFolder ?? '',
@@ -520,15 +518,6 @@ const Content: React.FC<ContentProps> = ({
     window.open(replacedUrl, '_blank');
   };
 
-  const classNameCheck =
-    isLeftExpanded && isRightExpanded
-      ? 'contentWithExpansion'
-      : isRightExpanded
-      ? 'contentWithChatBot'
-      : !isLeftExpanded && !isRightExpanded
-      ? 'w-[calc(100%-128px)]'
-      : 'contentWithDropzoneExpansion';
-
   const handleGraphView = () => {
     setOpenGraphView(true);
     setViewPoint('showGraphView');
@@ -782,8 +771,21 @@ const Content: React.FC<ContentProps> = ({
       {showEnhancementDialog && (
         <GraphEnhancementDialog open={showEnhancementDialog} onClose={toggleEnhancementDialog}></GraphEnhancementDialog>
       )}
-      <div className={`n-bg-palette-neutral-bg-default ${classNameCheck}`}>
-        <Flex className='w-full' alignItems='center' justifyContent='space-between' flexDirection='row' flexWrap='wrap'>
+      <GraphViewModal
+        inspectedName={inspectedName}
+        open={openGraphView}
+        setGraphViewOpen={setOpenGraphView}
+        viewPoint={viewPoint}
+        selectedRows={childRef.current?.getSelectedRows()}
+      />
+      <div className={`n-bg-palette-neutral-bg-default main-content-wrapper`}>
+        <Flex
+          className='w-full absolute top-0'
+          alignItems='center'
+          justifyContent='space-between'
+          flexDirection='row'
+          flexWrap='wrap'
+        >
           <div className='connectionstatus__container'>
             <span className='h6 px-1'>Neo4j connection {isReadOnlyUser ? '(Read only Mode)' : ''}</span>
             <Typography variant='body-medium'>
@@ -847,7 +849,6 @@ const Content: React.FC<ContentProps> = ({
           </div>
         </Flex>
         <FileTable
-          isExpanded={isLeftExpanded && isRightExpanded}
           connectionStatus={connectionStatus}
           setConnectionStatus={setConnectionStatus}
           onInspect={(name) => {
@@ -874,21 +875,21 @@ const Content: React.FC<ContentProps> = ({
           handleGenerateGraph={processWaitingFilesOnRefresh}
         ></FileTable>
         <Flex
-          className={`${
-            !isLeftExpanded && !isRightExpanded ? 'w-[calc(100%-128px)]' : 'w-full'
-          } p-2.5 absolute bottom-4 mt-1.5 self-start`}
+          className={`p-2.5  mt-1.5 absolute bottom-0 w-full`}
           justifyContent='space-between'
           flexDirection={isTablet ? 'column' : 'row'}
         >
-          <DropdownComponent
-            onSelect={handleDropdownChange}
-            options={llms ?? ['']}
-            placeholder='Select LLM Model'
-            defaultValue={model}
-            view='ContentView'
-            isDisabled={false}
-          />
-          <Flex flexDirection='row' gap='4' className='self-end' flexWrap='wrap'>
+          <div>
+            <DropdownComponent
+              onSelect={handleDropdownChange}
+              options={llms ?? ['']}
+              placeholder='Select LLM Model'
+              defaultValue={model}
+              view='ContentView'
+              isDisabled={false}
+            />
+          </div>
+          <Flex flexDirection='row' gap='4' className='self-end mb-2.5' flexWrap='wrap'>
             <ButtonWithToolTip
               text={tooltips.generateGraph}
               placement='top'
@@ -940,13 +941,6 @@ const Content: React.FC<ContentProps> = ({
           </Flex>
         </Flex>
       </div>
-      <GraphViewModal
-        inspectedName={inspectedName}
-        open={openGraphView}
-        setGraphViewOpen={setOpenGraphView}
-        viewPoint={viewPoint}
-        selectedRows={childRef.current?.getSelectedRows()}
-      />
     </>
   );
 };

frontend/src/components/DataSources/AWS/S3Modal.tsx

@@ -54,7 +54,7 @@ const S3Modal: React.FC<S3ModalProps> = ({ hideModal, open }) => {
       localStorage.setItem('accesskey', accessKey);
     }
     if (accessKey.length) {
-      localStorage.setItem('secretkey', secretKey);
+      localStorage.setItem('secretkey',btoa(secretKey));
     }
     if (isValid && accessKey.trim() != '' && secretKey.trim() != '') {
       try {

frontend/src/components/FileTable.tsx

@@ -58,7 +58,7 @@ import BreakDownPopOver from './BreakDownPopOver';
 let onlyfortheFirstRender = true;
 
 const FileTable = forwardRef<ChildRef, FileTableProps>((props, ref) => {
-  const { isExpanded, connectionStatus, setConnectionStatus, onInspect, onRetry, onChunkView } = props;
+  const { connectionStatus, setConnectionStatus, onInspect, onRetry, onChunkView } = props;
   const { filesData, setFilesData, model, rowSelection, setRowSelection, setSelectedRows, setProcessedCount, queue } =
     useFileContext();
   const { userCredentials, isReadOnlyUser } = useCredentials();
@@ -976,8 +976,6 @@ const FileTable = forwardRef<ChildRef, FileTableProps>((props, ref) => {
     [table]
   );
 
-  const classNameCheck = isExpanded ? 'fileTableWithExpansion' : `filetable`;
-
   useEffect(() => {
     setSelectedRows(table.getSelectedRowModel().rows.map((i) => i.id));
   }, [table.getSelectedRowModel()]);
@@ -986,49 +984,47 @@ const FileTable = forwardRef<ChildRef, FileTableProps>((props, ref) => {
     <>
       {filesData ? (
         <>
-          <div className={`${isExpanded ? 'w-[calc(100%-64px)]' : 'mx-auto w-[calc(100%-100px)]'}`}>
-            <DataGrid
-              ref={tableRef}
-              isResizable={true}
-              tableInstance={table}
-              styling={{
-                borderStyle: 'all-sides',
-                hasZebraStriping: true,
-                headerStyle: 'clean',
-              }}
-              isLoading={isLoading}
-              rootProps={{
-                className: classNameCheck,
-              }}
-              components={{
-                Body: () => (
-                  <DataGridComponents.Body
+          <DataGrid
+            ref={tableRef}
+            isResizable={true}
+            tableInstance={table}
+            styling={{
+              borderStyle: 'all-sides',
+              hasZebraStriping: true,
+              headerStyle: 'clean',
+            }}
+            isLoading={isLoading}
+            rootProps={{
+              className: 'absolute top-[14%] h-[67%] left-10 filetable',
+            }}
+            components={{
+              Body: () => (
+                <DataGridComponents.Body
+                  innerProps={{
+                    className: colorMode == 'dark' ? 'tbody-dark' : 'tbody-light',
+                  }}
+                />
+              ),
+              PaginationNumericButton: ({ isSelected, innerProps, ...restProps }) => {
+                return (
+                  <DataGridComponents.PaginationNumericButton
+                    {...restProps}
+                    isSelected={isSelected}
                     innerProps={{
-                      className: colorMode == 'dark' ? 'tbody-dark' : 'tbody-light',
+                      ...innerProps,
+                      style: {
+                        ...(isSelected && {
+                          backgroundSize: '200% auto',
+                          borderRadius: '10px',
+                        }),
+                      },
                     }}
                   />
-                ),
-                PaginationNumericButton: ({ isSelected, innerProps, ...restProps }) => {
-                  return (
-                    <DataGridComponents.PaginationNumericButton
-                      {...restProps}
-                      isSelected={isSelected}
-                      innerProps={{
-                        ...innerProps,
-                        style: {
-                          ...(isSelected && {
-                            backgroundSize: '200% auto',
-                            borderRadius: '10px',
-                          }),
-                        },
-                      }}
-                    />
-                  );
-                },
-              }}
-              isKeyboardNavigable={false}
-            />
-          </div>
+                );
+              },
+            }}
+            isKeyboardNavigable={false}
+          />
         </>
       ) : null}
     </>

frontend/src/components/Layout/DrawerChatbot.tsx

@@ -19,7 +19,7 @@ const DrawerChatbot: React.FC<DrawerChatbotProps> = ({ isExpanded, clearHistoryD
     return messages.some((msg) => msg.isTyping || msg.isLoading);
   };
   return (
-    <div className='flex min-h-[calc(-58px+100vh)] relative'>
+    <div className='flex min-h-[calc(-58px+100vh)] relative w-full'>
       <Drawer isExpanded={isExpanded} isCloseable={false} position='right' type='push' className='!pt-0'>
         <Drawer.Body className='!overflow-hidden !pr-0'>
           <Chatbot