Improve: make <Logs> responsive

src/containers/Logs/index.tsx

@@ -14,19 +14,16 @@ interface Log {
 interface LogsProps extends I18nProps {}
 
 interface LogsState {
-    listHeight: number
     logs: Log[]
 }
 
 class Logs extends React.Component<LogsProps, LogsState> {
     state: LogsState = {
-        listHeight: 0,
         logs: []
     }
 
     private listRef = React.createRef<HTMLUListElement>()
     componentDidMount () {
-        this.setListHeight()
         const logs: Log[] = Array.from(
             { length: 32 },
             () => ({ type: 'info', payload: 'google.com match DomainSuffix using Proxy', time: new Date() })
@@ -34,25 +31,18 @@ class Logs extends React.Component<LogsProps, LogsState> {
         this.setState({ logs }, () => this.scrollToBottom())
     }
 
-    setListHeight = () => {
-        this.setState({
-            listHeight: document.querySelector('.logs-card').clientHeight - 30
-        })
-    }
-
     scrollToBottom = () => {
         const ul = this.listRef.current
         ul.scrollTop = ul.scrollHeight
     }
 
     render () {
-        const listHeight = { height: this.state.listHeight }
         const { t } = this.props
         return (
             <div className="page">
                 <Header title={ t('title') } />
                 <Card className="logs-card">
-                    <ul className="logs-panel" style={listHeight} ref={this.listRef}>
+                    <ul className="logs-panel" ref={this.listRef}>
                         {
                             this.state.logs.map(
                                 log => (

src/containers/Logs/style.scss

@@ -1,4 +1,6 @@
 .logs-card {
+    display: flex;
+    flex-direction: column;
     flex: 1;
     margin-top: 25px;
 }
@@ -6,7 +8,8 @@
 .logs-panel {
     display: flex;
     flex-direction: column;
-    height: 0;
+    flex-grow: 1;
+    flex-basis: 0;
     list-style: none;
     padding: 10px;
     border-radius: 2px;