fix toolbar spacing

src/components/elements/popover/index.tsx

@@ -55,6 +55,10 @@ const PopOver: FunctionComponent<PopOverModel> = ({
     }
   }, [open]);
 
+  useEffect(() => {
+    console.log('$isMobile: ', theme);
+  }, [$isMobile]);
+
   return (
     <PopoverWrapper ref={ref}>
       <Selecter

src/components/elements/popover/popover.styles.ts

@@ -71,6 +71,7 @@ export const SelecterIcon = styled.span<{ open: boolean; theme: Theme }>`
 export const SelecterLabel = styled.span`
   font-size: 0.9rem;
   text-align: left;
+  white-space: nowrap;
 `;
 
 export const Header = styled.div`

src/components/timeline/timeline-popover-elements.tsx

@@ -1,35 +1,13 @@
-import { Theme } from '@models/Theme';
-import { TextDensity, TimelineMode } from '@models/TimelineModel';
 import { FunctionComponent, useContext, useMemo } from 'react';
 import { GlobalContext } from '../GlobalContext';
 import { List } from '../elements/list/list';
-import { ListItemModel } from '../elements/list/list.model';
 import { PopOver } from '../elements/popover';
 import { ArrowDownIcon, LayoutIcon, ParaIcon } from '../icons';
-
-type CommonProps = {
-  isDarkMode: boolean;
-  isMobile: boolean;
-  position: 'top' | 'bottom';
-  theme: Theme;
-};
-
-type LayoutSwitcherProp = {
-  initialTimelineMode?: TimelineMode | 'HORIZONTAL_ALL';
-  mode?: TimelineMode;
-  onUpdateTimelineMode: (s: string) => void;
-} & CommonProps;
-
-type QuickJumpProp = {
-  activeItem: number;
-  items: ListItemModel[];
-  onActivateItem: (id: string) => void;
-} & CommonProps;
-
-type ChangeDensityProp = {
-  onChange: (value: TextDensity) => void;
-  selectedDensity: TextDensity;
-} & CommonProps;
+import {
+  ChangeDensityProp,
+  LayoutSwitcherProp,
+  QuickJumpProp,
+} from './timeline-popover.model';
 
 const LayoutSwitcher: FunctionComponent<LayoutSwitcherProp> = ({
   onUpdateTimelineMode,

src/components/timeline/timeline-popover.model.ts

@@ -0,0 +1,27 @@
+import { Theme } from '@models/Theme';
+import { TextDensity, TimelineMode } from '@models/TimelineModel';
+import { ListItemModel } from '../elements/list/list.model';
+
+export type CommonProps = {
+  isDarkMode: boolean;
+  isMobile: boolean;
+  position: 'top' | 'bottom';
+  theme: Theme;
+};
+
+export type LayoutSwitcherProp = {
+  initialTimelineMode?: TimelineMode | 'HORIZONTAL_ALL';
+  mode?: TimelineMode;
+  onUpdateTimelineMode: (s: string) => void;
+} & CommonProps;
+
+export type QuickJumpProp = {
+  activeItem: number;
+  items: ListItemModel[];
+  onActivateItem: (id: string) => void;
+} & CommonProps;
+
+export type ChangeDensityProp = {
+  onChange: (value: TextDensity) => void;
+  selectedDensity: TextDensity;
+} & CommonProps;

src/components/timeline/timeline.style.ts

@@ -148,5 +148,6 @@ export const ExtraControls = styled.ul<{
 
 export const ExtraControlChild = styled.li`
   display: flex;
+  margin: 0.5rem 0;
   margin-right: 0.5rem;
 `;

src/models/TimelineModel.ts

@@ -249,7 +249,6 @@ export type TimelineProps = {
 
   // enables the read more button
   useReadMore?: boolean;
-
 };
 
 export type SlideShowType = 'reveal' | 'slide_in' | 'slide_from_sides';