actionList

packages/redux-devtools-inspector-monitor/src/ActionList.tsx

@@ -21,6 +21,10 @@ import {
 import { CSS } from '@dnd-kit/utilities';
 import ActionListRow from './ActionListRow';
 import ActionListHeader from './ActionListHeader';
+import {
+  actionListCss,
+  actionListWideCss,
+} from './utils/createStylingFromTheme';
 
 function getTimestamps<A extends Action<string>>(
   actions: { [actionId: number]: PerformAction<A> },
@@ -150,10 +154,7 @@ export default function ActionList<A extends Action<string>>({
     <div
       key="actionList"
       data-testid="actionList"
-      {...styling(
+      css={[actionListCss, isWideLayout && actionListWideCss]}
-        ['actionList', isWideLayout && 'actionListWide'],
-        isWideLayout,
-      )}
     >
       <ActionListHeader
         styling={styling}

packages/redux-devtools-inspector-monitor/src/utils/createStylingFromTheme.ts

@@ -66,23 +66,30 @@ export const inspectorCss: Interpolation<Theme> = (theme) => ({
   color: colorMap(theme).TEXT_COLOR,
 });
 
-export const inspectorWideCss = css({ flexDirection: 'column' });
+export const inspectorWideCss = css({ flexDirection: 'row' });
+
+export const actionListCss: Interpolation<Theme> = (theme) => ({
+  flexBasis: '40%',
+  flexShrink: 0,
+  overflowX: 'hidden',
+  overflowY: 'auto',
+  borderBottomWidth: '3px',
+  borderBottomStyle: 'double',
+  display: 'flex',
+  flexDirection: 'column',
+
+  backgroundColor: colorMap(theme).BACKGROUND_COLOR,
+  borderColor: colorMap(theme).LIST_BORDER_COLOR,
+});
+
+export const actionListWideCss = css({
+  flexBasis: '40%',
+  borderBottom: 'none',
+  borderRightWidth: '3px',
+  borderRightStyle: 'double',
+});
 
 const getSheetFromColorMap = (map: ColorMap) => ({
-  actionList: {
-    'flex-basis': '40%',
-    'flex-shrink': 0,
-    'overflow-x': 'hidden',
-    'overflow-y': 'auto',
-    'border-bottom-width': '3px',
-    'border-bottom-style': 'double',
-    display: 'flex',
-    'flex-direction': 'column',
-
-    'background-color': map.BACKGROUND_COLOR,
-    'border-color': map.LIST_BORDER_COLOR,
-  },
-
   actionListHeader: {
     display: 'flex',
     flex: '0 0 auto',
@@ -102,13 +109,6 @@ const getSheetFromColorMap = (map: ColorMap) => ({
     'margin-right': '10px',
   },
 
-  actionListWide: {
-    'flex-basis': '40%',
-    'border-bottom': 'none',
-    'border-right-width': '3px',
-    'border-right-style': 'double',
-  },
-
   actionListItem: {
     'border-bottom-width': '1px',
     'border-bottom-style': 'solid',