fix bug and refactor tooltip component (#5062)

ts/webui/src/components/common/CopyButton.tsx

@@ -1,7 +1,7 @@
 import React, { useRef } from 'react';
 import copy from 'copy-to-clipboard';
 import { IconButton, FontSizes, TooltipHost } from '@fluentui/react';
-import { TOOLTIP_BACKGROUND_COLOR } from '@static/const';
+import { TOOLTIPSTYLE } from '@static/const';
 
 interface CopyButtonProps {
     value: string;
@@ -38,15 +38,7 @@ const CopyButton = (props: CopyButtonProps): any => {
                 content='Copied'
                 componentRef={ref}
                 delay={0}
-                tooltipProps={{
+                tooltipProps={TOOLTIPSTYLE}
-                    calloutProps: {
-                        styles: {
-                            beak: { background: TOOLTIP_BACKGROUND_COLOR },
-                            beakCurtain: { background: TOOLTIP_BACKGROUND_COLOR },
-                            calloutMain: { background: TOOLTIP_BACKGROUND_COLOR }
-                        }
-                    }
-                }}
             />
         </div>
     );

ts/webui/src/components/common/TooltipHostIndex.tsx

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { TOOLTIPSTYLE } from '@static/const';
+import { DirectionalHint, TooltipHost } from '@fluentui/react';
+
+interface TooltipHostIndexProps {
+    value: string;
+}
+
+const TooltipHostIndex = (props: TooltipHostIndexProps): any => {
+    const { value } = props;
+    const length = String(value).length;
+    return (
+        <>
+            {length >= 15 ? (
+                <div>
+                    <TooltipHost
+                        content={value}
+                        directionalHint={DirectionalHint.bottomLeftEdge}
+                        tooltipProps={TOOLTIPSTYLE}
+                    >
+                        <div className='ellipsis'>{value}</div>
+                    </TooltipHost>
+                </div>
+            ) : (
+                <div>{value}</div>
+            )}
+        </>
+    );
+};
+
+export default TooltipHostIndex;

ts/webui/src/components/experiment/overview/Config.tsx

@@ -0,0 +1,52 @@
+import * as React from 'react';
+import { Stack } from '@fluentui/react';
+import { EXPERIMENT } from '@static/datamodel';
+import { leftProgress, rightEditParam } from './count/commonStyle';
+import TooltipHostIndex from '@components/common/TooltipHostIndex';
+import '@style/experiment/overview/command.scss';
+
+// This file is for showing the experiment some important params,
+// Log directory, trial command, training platform and tuner/advisor message
+
+const Config = (): any => {
+    const tuner = EXPERIMENT.profile.params.tuner;
+    const advisor = EXPERIMENT.profile.params.advisor;
+    const assessor = EXPERIMENT.profile.params.assessor;
+    const title: string[] = [];
+    const builtinName: string[] = [];
+    if (tuner !== undefined) {
+        title.push('Tuner');
+        builtinName.push(tuner.name || tuner.className || 'unknown');
+    }
+
+    if (advisor !== undefined) {
+        title.push('Advisor');
+        builtinName.push(advisor.name || advisor.className || 'unknown');
+    }
+
+    if (assessor !== undefined) {
+        title.push('Assessor');
+        builtinName.push(assessor.name || assessor.className || 'unknown');
+    }
+
+    return (
+        <Stack horizontal>
+            <div className='basic' style={leftProgress}>
+                <p className='command'>Log directory</p>
+                <TooltipHostIndex value={EXPERIMENT.profile.logDir || 'unknown'} />
+                <p className='lineMargin'>Trial command</p>
+                <TooltipHostIndex value={EXPERIMENT.config.trialCommand || 'unknown'} />
+            </div>
+            <div className='basic' style={rightEditParam}>
+                <div>
+                    <p className='command'>Training platform</p>
+                    <div className='ellipsis'>{EXPERIMENT.trainingServicePlatform}</div>
+                    <p className='lineMargin'>{title.join('/')}</p>
+                    <div className='ellipsis'>{builtinName.join('/')}</div>
+                </div>
+            </div>
+        </Stack>
+    );
+};
+
+export default Config;

ts/webui/src/components/experiment/overview/Overview.tsx

@@ -10,8 +10,7 @@ import { BasicInfo } from './params/BasicInfo';
 import { ExpDuration } from './count/ExpDuration';
 import { ExpDurationContext } from './count/ExpDurationContext';
 import { TrialCount } from './count/TrialCount';
-import { Command1 } from './command/Command1';
+import Config from './Config';
-import { Command2 } from './command/Command2';
 import { TitleContext } from './TitleContext';
 import { itemStyleSucceed, entriesOption } from './overviewConst';
 import '@style/experiment/overview/overview.scss';
@@ -185,9 +184,8 @@ class Overview extends React.Component<{}, OverviewState> {
                                         />
                                     </div>
                                 </div>
-                                <Stack className='overviewCommand' horizontal>
+                                <Stack className='overviewCommand'>
-                                    <Command2 />
+                                    <Config />
-                                    <Command1 />
                                 </Stack>
                             </div>
                         </div>

ts/webui/src/components/experiment/overview/command/Command1.tsx

@@ -1,37 +0,0 @@
-import React from 'react';
-import { EXPERIMENT } from '@static/datamodel';
-import { rightEidtParam } from '../count/commonStyle';
-import '@style/experiment/overview/command.scss';
-
-export const Command1 = (): any => {
-    const tuner = EXPERIMENT.profile.params.tuner;
-    const advisor = EXPERIMENT.profile.params.advisor;
-    const assessor = EXPERIMENT.profile.params.assessor;
-    const title: string[] = [];
-    const builtinName: string[] = [];
-    if (tuner !== undefined) {
-        title.push('Tuner');
-        builtinName.push(tuner.name || tuner.className || 'unknown');
-    }
-
-    if (advisor !== undefined) {
-        title.push('Advisor');
-        builtinName.push(advisor.name || advisor.className || 'unknown');
-    }
-
-    if (assessor !== undefined) {
-        title.push('Assessor');
-        builtinName.push(assessor.name || assessor.className || 'unknown');
-    }
-
-    return (
-        <div className='basic' style={rightEidtParam}>
-            <div>
-                <p className='command'>Training platform</p>
-                <div className='ellipsis'>{EXPERIMENT.trainingServicePlatform}</div>
-                <p className='lineMargin'>{title.join('/')}</p>
-                <div className='ellipsis'>{builtinName.join('/')}</div>
-            </div>
-        </div>
-    );
-};

ts/webui/src/components/experiment/overview/command/Command2.tsx

@@ -1,51 +0,0 @@
-import React from 'react';
-import { TooltipHost, DirectionalHint } from '@fluentui/react';
-import { EXPERIMENT } from '@static/datamodel';
-import { leftProgress } from '../count/commonStyle';
-import { TOOLTIP_BACKGROUND_COLOR } from '@static/const';
-import '@style/experiment/overview/command.scss';
-
-export const Command2 = (): any => {
-    return (
-        <div className='basic' style={leftProgress}>
-            <p className='command'>Log directory</p>
-            <div className='ellipsis'>
-                <TooltipHost
-                    content={EXPERIMENT.profile.logDir || 'unknown'}
-                    className='ellipsis'
-                    directionalHint={DirectionalHint.bottomCenter}
-                    tooltipProps={{
-                        calloutProps: {
-                            styles: {
-                                beak: { background: TOOLTIP_BACKGROUND_COLOR },
-                                beakCurtain: { background: TOOLTIP_BACKGROUND_COLOR },
-                                calloutMain: { background: TOOLTIP_BACKGROUND_COLOR }
-                            }
-                        }
-                    }}
-                >
-                    {EXPERIMENT.profile.logDir || 'unknown'}
-                </TooltipHost>
-            </div>
-            <p className='lineMargin'>Trial command</p>
-            <div className='ellipsis'>
-                <TooltipHost
-                    content={EXPERIMENT.config.trialCommand || 'unknown'}
-                    className='ellipsis'
-                    directionalHint={DirectionalHint.bottomCenter}
-                    tooltipProps={{
-                        calloutProps: {
-                            styles: {
-                                beak: { background: TOOLTIP_BACKGROUND_COLOR },
-                                beakCurtain: { background: TOOLTIP_BACKGROUND_COLOR },
-                                calloutMain: { background: TOOLTIP_BACKGROUND_COLOR }
-                            }
-                        }
-                    }}
-                >
-                    {EXPERIMENT.config.trialCommand || 'unknown'}
-                </TooltipHost>
-            </div>
-        </div>
-    );
-};

ts/webui/src/components/experiment/overview/count/ExpDuration.tsx

@@ -1,12 +1,11 @@
 import React from 'react';
-import { Stack, ProgressIndicator, TooltipHost, DirectionalHint } from '@fluentui/react';
 import { EXPERIMENT } from '@static/datamodel';
-import { CONTROLTYPE, TOOLTIP_BACKGROUND_COLOR } from '@static/const';
+import { CONTROLTYPE } from '@static/const';
 import { convertDuration, convertTimeAsUnit } from '@static/function';
 import { EditExperimentParam } from './EditExperimentParam';
 import { ExpDurationContext } from './ExpDurationContext';
+import ProgressBar from './ProgressBar';
 import { EditExpeParamContext } from './context';
-import { leftProgress, rightEidtParam, progressHeight } from './commonStyle';
 import '@style/experiment/overview/count.scss';
 
 export const ExpDuration = (): any => (
@@ -18,35 +17,14 @@ export const ExpDuration = (): any => (
             const execDurationStr = convertDuration(execDuration);
             const maxExecDurationStr = convertTimeAsUnit(maxDurationUnit, maxExecDuration).toString();
             return (
-                <Stack horizontal className='ExpDuration'>
+                <React.Fragment>
-                    <div style={leftProgress}>
+                    <ProgressBar
-                        <TooltipHost
+                        tooltip={`${convertDuration(tooltip)} remaining`}
-                            content={`${convertDuration(tooltip)} remaining`}
+                        percent={percent}
-                            directionalHint={DirectionalHint.bottomCenter}
+                        latestVal={execDurationStr}
-                            tooltipProps={{
+                        presetVal={`${maxExecDurationStr} ${maxDurationUnit}`}
-                                calloutProps: {
+                    />
-                                    styles: {
+                    <div className='editExpDuration'>
-                                        beak: { background: TOOLTIP_BACKGROUND_COLOR },
-                                        beakCurtain: { background: TOOLTIP_BACKGROUND_COLOR },
-                                        calloutMain: { background: TOOLTIP_BACKGROUND_COLOR }
-                                    }
-                                }
-                            }}
-                        >
-                            <ProgressIndicator
-                                className={EXPERIMENT.status}
-                                percentComplete={percent}
-                                barHeight={progressHeight}
-                            />
-                        </TooltipHost>
-                        {/* execDuration / maxDuration: 20min / 1h */}
-                        <div className='exp-progress'>
-                            <span className={`${EXPERIMENT.status} bold`}>{execDurationStr}</span>
-                            <span className='joiner'>/</span>
-                            <span>{`${maxExecDurationStr} ${maxDurationUnit}`}</span>
-                        </div>
-                    </div>
-                    <div style={rightEidtParam}>
                         <EditExpeParamContext.Provider
                             value={{
                                 editType: CONTROLTYPE[0],
@@ -61,7 +39,7 @@ export const ExpDuration = (): any => (
                             <EditExperimentParam />
                         </EditExpeParamContext.Provider>
                     </div>
-                </Stack>
+                </React.Fragment>
             );
         }}
     </ExpDurationContext.Consumer>

ts/webui/src/components/experiment/overview/count/ProgressBar.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { Stack, ProgressIndicator, TooltipHost, DirectionalHint } from '@fluentui/react';
+import { EXPERIMENT } from '@static/datamodel';
+import { TOOLTIPSTYLE } from '@static/const';
+import { leftProgress, progressHeight } from './commonStyle';
+import '@style/experiment/overview/count.scss';
+
+interface ProgressBarProps {
+    tooltip: string;
+    percent: number;
+    latestVal: string;
+    presetVal: string;
+}
+
+const ProgressBar = (props: ProgressBarProps): any => {
+    const { tooltip, percent, latestVal, presetVal } = props;
+    return (
+        <Stack horizontal className='marginTop'>
+            <div style={leftProgress}>
+                <TooltipHost
+                    content={tooltip}
+                    directionalHint={DirectionalHint.bottomCenter}
+                    tooltipProps={TOOLTIPSTYLE}
+                >
+                    <ProgressIndicator
+                        className={EXPERIMENT.status}
+                        percentComplete={percent}
+                        barHeight={progressHeight}
+                    />
+                </TooltipHost>
+                <div className='exp-progress'>
+                    <span className={`${EXPERIMENT.status} bold`}>{latestVal}</span>
+                    <span className='joiner'>/</span>
+                    <span>{presetVal}</span>
+                </div>
+            </div>
+        </Stack>
+    );
+};
+
+export default ProgressBar;

ts/webui/src/components/experiment/overview/count/TrialCount.tsx

@@ -1,11 +1,12 @@
 import * as React from 'react';
-import { Stack, TooltipHost, ProgressIndicator, DirectionalHint, IStackTokens } from '@fluentui/react';
+import { Stack, IStackTokens } from '@fluentui/react';
 import { EXPERIMENT, TRIALS } from '@static/datamodel';
-import { CONTROLTYPE, TOOLTIP_BACKGROUND_COLOR, MAX_TRIAL_NUMBERS } from '@static/const';
+import { CONTROLTYPE, MAX_TRIAL_NUMBERS } from '@static/const';
 import { EditExperimentParam } from './EditExperimentParam';
+import ProgressBar from './ProgressBar';
 import { EditExpeParamContext } from './context';
 import { ExpDurationContext } from './ExpDurationContext';
-import { leftProgress, rightEidtParam, progressHeight } from './commonStyle';
+import { leftProgress, rightEditParam } from './commonStyle';
 
 const line1Tokens: IStackTokens = {
     childrenGap: 60
@@ -29,34 +30,12 @@ export const TrialCount = (): any => {
                 const { updateOverviewPage } = value;
                 return (
                     <React.Fragment>
-                        <Stack horizontal className='ExpDuration'>
+                        <ProgressBar
-                            <div style={leftProgress}>
+                            tooltip={`${bar2.toString()} trials`}
-                                <TooltipHost
+                            percent={bar2Percent}
-                                    content={`${bar2.toString()} trials`}
+                            latestVal={String(bar2)}
-                                    directionalHint={DirectionalHint.bottomCenter}
+                            presetVal={String(maxTrialNum)}
-                                    tooltipProps={{
+                        />
-                                        calloutProps: {
-                                            styles: {
-                                                beak: { background: TOOLTIP_BACKGROUND_COLOR },
-                                                beakCurtain: { background: TOOLTIP_BACKGROUND_COLOR },
-                                                calloutMain: { background: TOOLTIP_BACKGROUND_COLOR }
-                                            }
-                                        }
-                                    }}
-                                >
-                                    <ProgressIndicator
-                                        className={EXPERIMENT.status}
-                                        percentComplete={bar2Percent}
-                                        barHeight={progressHeight}
-                                    />
-                                </TooltipHost>
-                                <div className='exp-progress'>
-                                    <span className={`${EXPERIMENT.status} bold`}>{bar2}</span>
-                                    <span className='joiner'>/</span>
-                                    <span>{maxTrialNum}</span>
-                                </div>
-                            </div>
-                        </Stack>
                         <Stack horizontal className='marginTop'>
                             <div style={leftProgress}>
                                 <Stack horizontal className='status-count' tokens={line1Tokens}>
@@ -85,7 +64,7 @@ export const TrialCount = (): any => {
                                 </Stack>
                             </div>
 
-                            <div style={rightEidtParam}>
+                            <div style={rightEditParam}>
                                 <EditExpeParamContext.Provider
                                     value={{
                                         title: MAX_TRIAL_NUMBERS,

ts/webui/src/components/experiment/overview/count/commonStyle.ts

@@ -2,11 +2,11 @@ const leftProgress: React.CSSProperties = {
     width: '60%',
     position: 'relative'
 };
-const rightEidtParam: React.CSSProperties = {
+const rightEditParam: React.CSSProperties = {
     paddingLeft: '9%',
     boxSizing: 'border-box'
 };
 
 const progressHeight = 8;
 
-export { leftProgress, rightEidtParam, progressHeight };
+export { leftProgress, rightEditParam, progressHeight };

ts/webui/src/components/experiment/trialdetail/table/TableList.tsx

@@ -1,17 +1,6 @@
 import React from 'react';
-import {
+import { DefaultButton, IColumn, Icon, PrimaryButton, Stack, StackItem, Checkbox } from '@fluentui/react';
-    DefaultButton,
-    IColumn,
-    Icon,
-    PrimaryButton,
-    Stack,
-    StackItem,
-    TooltipHost,
-    DirectionalHint,
-    Checkbox
-} from '@fluentui/react';
 import { Trial } from '@model/trial';
-import { TOOLTIP_BACKGROUND_COLOR } from '@static/const';
 import { EXPERIMENT, TRIALS } from '@static/datamodel';
 import { convertDuration, formatTimestamp, copyAndSort, parametersType, _inferColumnTitle } from '@static/function';
 import { SortInfo, SearchItems } from '@static/interface';
@@ -26,6 +15,7 @@ import KillJobIndex from './tableFunction/killJob/KillJobIndex';
 import { getTrialsBySearchFilters } from './tableFunction/search/searchFunction';
 import PaginationTable from '@components/common/PaginationTable';
 import CopyButton from '@components/common/CopyButton';
+import TooltipHostIndex from '@components/common/TooltipHostIndex';
 
 require('echarts/lib/chart/line');
 require('echarts/lib/component/tooltip');
@@ -380,66 +370,15 @@ class TableList extends React.Component<TableListProps, TableListState> {
                     )
                 }),
                 ...(k === 'message' && {
-                    onRender: (record): React.ReactNode =>
+                    onRender: (record): React.ReactNode => <TooltipHostIndex value={record.message} />
-                        record.message.length > 15 ? (
-                            <TooltipHost
-                                content={record.message}
-                                directionalHint={DirectionalHint.bottomCenter}
-                                tooltipProps={{
-                                    calloutProps: {
-                                        styles: {
-                                            beak: { background: TOOLTIP_BACKGROUND_COLOR },
-                                            beakCurtain: { background: TOOLTIP_BACKGROUND_COLOR },
-                                            calloutMain: { background: TOOLTIP_BACKGROUND_COLOR }
-                                        }
-                                    }
-                                }}
-                            >
-                                <div>{record.message}</div>
-                            </TooltipHost>
-                        ) : (
-                            <div>{record.message}</div>
-                        )
                 }),
                 ...((k.startsWith('metric/') || k.startsWith('space/')) && {
                     // show tooltip
-                    onRender: (record): React.ReactNode => (
+                    onRender: (record): React.ReactNode => <TooltipHostIndex value={record[k]} />
-                        <TooltipHost
-                            content={record[k]}
-                            directionalHint={DirectionalHint.bottomCenter}
-                            tooltipProps={{
-                                calloutProps: {
-                                    styles: {
-                                        beak: { background: TOOLTIP_BACKGROUND_COLOR },
-                                        beakCurtain: { background: TOOLTIP_BACKGROUND_COLOR },
-                                        calloutMain: { background: TOOLTIP_BACKGROUND_COLOR }
-                                    }
-                                }
-                            }}
-                        >
-                            <div className='ellipsis'>{record[k]}</div>
-                        </TooltipHost>
-                    )
                 }),
                 ...(k === 'latestAccuracy' && {
                     // FIXME: this is ad-hoc
-                    onRender: (record): React.ReactNode => (
+                    onRender: (record): React.ReactNode => <TooltipHostIndex value={record._formattedLatestAccuracy} />
-                        <TooltipHost
-                            content={record._formattedLatestAccuracy}
-                            directionalHint={DirectionalHint.bottomCenter}
-                            tooltipProps={{
-                                calloutProps: {
-                                    styles: {
-                                        beak: { background: TOOLTIP_BACKGROUND_COLOR },
-                                        beakCurtain: { background: TOOLTIP_BACKGROUND_COLOR },
-                                        calloutMain: { background: TOOLTIP_BACKGROUND_COLOR }
-                                    }
-                                }
-                            }}
-                        >
-                            <div className='ellipsis'>{record.formattedLatestAccuracy}</div>
-                        </TooltipHost>
-                    )
                 }),
                 ...(['startTime', 'endTime'].includes(k) && {
                     onRender: (record): React.ReactNode => <span>{formatTimestamp(record[k], '--')}</span>

ts/webui/src/components/experimentManagement/FilterBtns.tsx

@@ -60,6 +60,7 @@ class FilterBtns extends React.Component<FilterBtnsProps, {}> {
                     ariaLabel='Select a date'
                     value={selectedStartDate}
                     onSelectDate={getSelectedData.bind(this, 'start')}
+                    className='filter-condition-date'
                 />
                 <DatePicker
                     label='End time'
@@ -69,6 +70,7 @@ class FilterBtns extends React.Component<FilterBtnsProps, {}> {
                     ariaLabel='Select a date'
                     value={selectedEndDate}
                     onSelectDate={getSelectedData.bind(this, 'end')}
+                    className='filter-condition-date'
                 />
                 <DefaultButton onClick={setSearchSource.bind(this)} className='reset'>
                     <Icon iconName='Refresh' />

ts/webui/src/static/const.ts

@@ -70,6 +70,15 @@ const SUPPORTED_SEARCH_SPACE_TYPE = [
 ];
 
 const TOOLTIP_BACKGROUND_COLOR = '#484848';
+const TOOLTIPSTYLE = {
+    calloutProps: {
+        styles: {
+            beak: { background: TOOLTIP_BACKGROUND_COLOR },
+            beakCurtain: { background: TOOLTIP_BACKGROUND_COLOR },
+            calloutMain: { background: TOOLTIP_BACKGROUND_COLOR }
+        }
+    }
+};
 const MAX_TRIAL_NUMBERS = 'Max trial No.';
 const RETIARIIPARAMETERS = 'mutation_summary';
 
@@ -88,7 +97,7 @@ export {
     METRIC_GROUP_UPDATE_SIZE,
     CONCURRENCYTOOLTIP,
     SUPPORTED_SEARCH_SPACE_TYPE,
-    TOOLTIP_BACKGROUND_COLOR,
+    TOOLTIPSTYLE,
     MAX_TRIAL_NUMBERS,
     RETIARIIPARAMETERS
 };

ts/webui/src/static/interface.ts

@@ -27,7 +27,7 @@ interface MultipleAxes {
 }
 
 interface TableRecord {
-    key: string;
+    _key: string;
     sequenceId: number;
     startTime: number;
     endTime?: number;
@@ -37,7 +37,7 @@ interface TableRecord {
     message: string;
     intermediateCount: number;
     latestAccuracy: number | undefined;
-    formattedLatestAccuracy: string; // format (LATEST/FINAL),
+    _formattedLatestAccuracy: string; // format (LATEST/FINAL),
 }
 
 interface SearchSpace {

ts/webui/src/static/model/trial.ts

@@ -184,7 +184,7 @@ class Trial {
         const duration = (endTime - this.info.startTime!) / 1000;
 
         return {
-            key: this.info.trialJobId,
+            _key: this.info.trialJobId,
             sequenceId: this.info.sequenceId,
             id: this.info.trialJobId,
             // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
@@ -195,7 +195,7 @@ class Trial {
             message: this.info.message ?? '--',
             intermediateCount: this.intermediates.length,
             latestAccuracy: this.latestAccuracy,
-            formattedLatestAccuracy: this.formatLatestAccuracy()
+            _formattedLatestAccuracy: this.formatLatestAccuracy()
         };
     }
 

ts/webui/src/static/style/experiment/overview/count.scss

@@ -5,14 +5,6 @@ $margin: 24px;
     margin-top: $margin;
 }
 
-.ExpDuration {
-    margin-top: $margin;
-
-    .maxTrialNum {
-        margin-bottom: 10px;
-    }
-}
-
 .exp-progress {
     margin-top: 9px;
 
@@ -39,6 +31,7 @@ $margin: 24px;
 }
 
 .maxTrialNum {
+    margin-bottom: 10px;
     .editparam {
         position: relative;
         top: -7px;
@@ -55,6 +48,14 @@ $margin: 24px;
     top: -4px;
 }
 
+.editExpDuration{
+    box-sizing: border-box;
+    width: 31%;
+    position: relative;
+    left: 69%;
+    bottom: 33%;
+}
+
 .concurrency {
     .editparam {
         margin-top: 5px;

ts/webui/src/static/style/experimentManagement/experiment.scss

@@ -59,6 +59,10 @@ $pageMargin: 24px;
         &-platform {
             width: 150px;
         }
+
+        &-date {
+            width: 162px;
+        }
     }
 
     .hidden {