feat: increase the width of the Vault component for comptaible visual appearance

Author: ckeshava

src/containers/Vault/index.tsx

@@ -50,7 +50,7 @@ const Page: FC<PropsWithChildren<{ vaultId: string }>> = ({
   vaultId,
   children,
 }) => (
-  <div className="vault-page">
+  <div className="vault-page section">
     <Helmet title={`Vault ${vaultId.substring(0, 12)}...`} />
     {children}
   </div>
@@ -96,7 +96,7 @@ export const Vault = () => {
   const renderError = () => {
     const message = getErrorMessage(error)
     return (
-      <div className="vault-page">
+      <div className="vault-page section">
         <NoMatch title={message.title} hints={message.hints} />
       </div>
     )

src/containers/Vault/test/Vault.test.tsx

@@ -207,6 +207,23 @@ describe('Vault Component', () => {
         expect(container.querySelector('.vault-page')).toBeInTheDocument()
       })
     })
+
+    it('applies section class for max-width constraints', async () => {
+      mockedGetVault.mockResolvedValue(createMockVaultData())
+
+      const TestWrapper = createTestWrapper(queryClient, 'TEST_VAULT_ID')
+      const { container } = render(
+        <TestWrapper>
+          <Vault />
+        </TestWrapper>,
+      )
+
+      await waitFor(() => {
+        const vaultPage = container.querySelector('.vault-page')
+        expect(vaultPage).toBeInTheDocument()
+        expect(vaultPage).toHaveClass('section')
+      })
+    })
   })
 
   /**