[DDW-746] Wallet settings screen - no space at the bottom when scrolled down (#2686)

* [DDW-746] Fixed UI issue caused by the electron upgrade

* [DDW-746] Added new entry in CHANGELOG

* [DDW-746] Fixed wrong sizing in transactions

* [DDW-746] Fixed eslint Issue

* [DDW-746] Fixed height issues in pages

* [DDW-746] Upgraded version

* [DDW-746] Updated CHANGELOG

* [DDW-746] Changed layout display to flex

* [DDW-746] Fixed layout in UTXO Distribution page

* [DDW-746] Fixed preetier

* [DDW-746] Added this fix to vNext

Author: danielmain

CHANGELOG.md

@@ -4,6 +4,7 @@
 
 ### Fixes
 
+- Fixed wallet settings screen - no space at the bottom when scrolled down ([PR 2686](https://github.com/input-output-hk/daedalus/pull/2686))
 - Fixed the missing text for the DAPP static screens ([PR 2693](https://github.com/input-output-hk/daedalus/pull/2693))
 
 ### Chores

source/renderer/app/components/layout/VerticalFlexContainer.js

@@ -1,17 +1,13 @@
 // @flow
-import React, { Component } from 'react';
+import React, { memo } from 'react';
 import type { Node } from 'react';
-import { observer } from 'mobx-react';
 import styles from './VerticalFlexContainer.scss';
 
 type Props = {
   children?: ?Node,
 };
 
-@observer
-export default class VerticalFlexContainer extends Component<Props> {
-  render() {
-    const { children } = this.props;
-    return <div className={styles.component}>{children}</div>;
-  }
-}
+const VerticalFlexContainer = ({ children }: Props) => (
+  <div className={styles.component}>{children}</div>
+);
+export default memo<Props>(VerticalFlexContainer);

source/renderer/app/components/wallet/layouts/WalletWithNavigation.scss

@@ -17,10 +17,11 @@
 }
 
 .page {
-  height: calc(100% - 50px);
+  flex: 1;
+  flex-direction: column;
+  flex-grow: 1;
   overflow-x: hidden;
   overflow-y: overlay;
-  position: relative;
 }
 
 .settingsTabPage {

source/renderer/app/components/wallet/receive/VirtualAddressesList.scss

@@ -1,7 +1,6 @@
 .component {
-  height: 100%;
-  width: 100%;
-  width: -webkit-calc(100% + 20px);
+  flex: 1;
+  flex-grow: 1;
 
   *::-webkit-scrollbar-button {
     display: none;

source/renderer/app/components/wallet/receive/WalletReceiveSequential.scss

@@ -3,9 +3,12 @@
 
 .component {
   color: var(--theme-bordered-box-text-color);
+  display: flex;
   flex: 1;
+  flex-direction: column;
   font-family: var(--font-regular);
-  min-height: 500px;
+  height: 100%;
+  min-height: 250px;
   overflow-x: hidden;
   overflow-y: overlay;
   padding: 20px;
@@ -53,6 +56,7 @@
   display: flex;
   flex: 1;
   flex-direction: column;
+  flex-grow: 1;
   font-family: var(--font-regular);
   font-size: 16px;
   line-height: 22px;

source/renderer/app/components/wallet/settings/WalletSettings.js

@@ -304,7 +304,7 @@ export default class WalletSettings extends Component<Props, State> {
       : intl.formatMessage(messages.passwordNotSet);
 
     return (
-      <div className={styles.component}>
+      <div className={styles.root}>
         <BorderedBox>
           <InlineEditingInput
             className="walletName"

source/renderer/app/components/wallet/settings/WalletSettings.scss

@@ -1,12 +1,11 @@
 @import '../../../themes/mixins/error-message';
 
-.component {
+.root {
   background-color: var(--theme-main-body-background-color);
   display: flex;
   flex-direction: column;
   font-family: var(--font-regular);
-  height: 100%;
-  padding: 20px;
+  padding: 20px 20px 0 20px;
 
   :global {
     .SimpleFormField_label {

source/renderer/app/components/wallet/transactions/WalletTransactions.js

@@ -8,7 +8,6 @@ import WalletTransactionsList, {
 import WalletTransactionsHeader from './WalletTransactionsHeader';
 import FilterResultInfo from './FilterResultInfo';
 import WalletNoTransactions from './WalletNoTransactions';
-import VerticalFlexContainer from '../../layout/VerticalFlexContainer';
 import { formattedWalletAmount } from '../../../utils/formatters';
 import { getNumberOfFilterDimensionsApplied } from '../../../utils/transaction';
 import { WalletTransaction } from '../../../domains/WalletTransaction';
@@ -165,7 +164,7 @@ export default class WalletTransactions extends Component<Props, State> {
               numberFormat: currentNumberFormat,
             }}
           />
-          <VerticalFlexContainer>{walletTransactions}</VerticalFlexContainer>
+          {walletTransactions}
         </div>
       </WalletTransactionsListScrollContext.Provider>
     );

source/renderer/app/components/wallet/transactions/WalletTransactions.scss

@@ -1,4 +1,9 @@
 .component {
+  align-items: center;
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  flex-grow: 1;
   height: 100%;
   padding-top: 53px;
 }

source/renderer/app/components/wallet/transactions/WalletTransactionsHeader.scss

@@ -9,6 +9,7 @@
   padding: 0 40px;
   position: relative;
   transition: box-shadow 0.25s ease-out;
+  width: 100%;
   z-index: 1;
   &.isScrolling {
     box-shadow: 0 2.5px 10px 0 rgba(0, 0, 0, 0.25);