smaller demo improvements

ui/src/App.less

@@ -17,6 +17,8 @@
     padding: 24px;
     background-color: var(--semi-color-bg-0);
     box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
 
     @media (max-width: 768px) {
       padding: 12px;

ui/src/components/segment/SegmentPart.jsx

@@ -8,12 +8,12 @@ import { Card } from '@douyinfe/semi-ui-19';
 
 import './SegmentParts.less';
 
-export const SegmentPart = ({ name, Icon = null, children, helpText = null }) => {
+export const SegmentPart = ({ name, Icon = null, children, helpText = null, className = '' }) => {
   const { Meta } = Card;
 
   return (
     <Card
-      className="segmentParts"
+      className={`segmentParts ${className}`}
       title={
         (helpText || name) && (
           <Meta title={name} description={helpText} avatar={Icon == null ? null : <Icon size="extra-extra-small" />} />

ui/src/views/dashboard/Dashboard.jsx

@@ -20,7 +20,6 @@ import {
 import { useSelector, useActions } from '../../services/state/store';
 import KpiCard from '../../components/cards/KpiCard.jsx';
 import PieChartCard from '../../components/cards/PieChartCard.jsx';
-import Headline from '../../components/headline/Headline.jsx';
 
 import './Dashboard.less';
 import { SegmentPart } from '../../components/segment/SegmentPart.jsx';
@@ -39,8 +38,6 @@ export default function Dashboard() {
 
   return (
     <div className="dashboard">
-      <Headline text="Dashboard" size={3} />
-
       <Row gutter={[16, 16]} className="dashboard__row">
         <Col span={12} xs={24} sm={24} md={24} lg={24} xl={12}>
           <SegmentPart name="General" Icon={IconTerminal}>
@@ -153,7 +150,12 @@ export default function Dashboard() {
         </Col>
       </Row>
 
-      <SegmentPart name="Provider Insights" Icon={IconStar} helpText="Percentage of found listings over all providers">
+      <SegmentPart
+        name="Provider Insights"
+        Icon={IconStar}
+        helpText="Percentage of found listings over all providers"
+        className="dashboard__provider-insights"
+      >
         <PieChartCard data={pieData} />
       </SegmentPart>
     </div>

ui/src/views/dashboard/Dashboard.less

@@ -1,4 +1,8 @@
 .dashboard {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+
   &__row {
     margin-bottom: 24px;
     flex-wrap: wrap;
@@ -7,4 +11,23 @@
       margin-bottom: 0; // Handled by Row gutter
     }
   }
+
+  &__provider-insights {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    margin: 0 !important;
+
+    .semi-card-body {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      max-height: 300px;
+
+      > * {
+        flex: 1;
+      }
+    }
+  }
 }

ui/src/views/userSettings/UserSettings.jsx

@@ -4,15 +4,13 @@
  */
 
 import React, { useEffect, useState, useMemo } from 'react';
-import { Divider, Button, AutoComplete, Toast, Typography, Banner } from '@douyinfe/semi-ui-19';
+import { Divider, Button, AutoComplete, Toast, Banner } from '@douyinfe/semi-ui-19';
 import { IconSave, IconHome } from '@douyinfe/semi-icons';
 import { useSelector, useActions } from '../../services/state/store';
 import { xhrGet, xhrPost } from '../../services/xhr';
 import { SegmentPart } from '../../components/segment/SegmentPart';
 import debounce from 'lodash/debounce';
 
-const { Title } = Typography;
-
 const UserSettings = () => {
   const actions = useActions();
   const homeAddress = useSelector((state) => state.userSettings.settings.home_address);
@@ -72,8 +70,6 @@ const UserSettings = () => {
 
   return (
     <div className="user-settings">
-      <Title heading={2}>User Specific Settings</Title>
-      <Divider />
       <SegmentPart
         name="Distance claculation"
         Icon={IconHome}