chore(trading): layout adjustments to accomodate default 13 inch screens (#4798)

apps/trading/client-pages/market/trade-grid.tsx

@@ -73,7 +73,7 @@ const MainGrid = memo(
             </ResizableGridPanel>
             <ResizableGridPanel
               minSize={200}
-              preferredSize={sizesMiddle[1] || 300}
+              preferredSize={sizesMiddle[1] || 275}
             >
               <TradeGridChild>
                 <Tabs storageKey="console-trade-grid-main-right">
@@ -181,7 +181,7 @@ const TradeGridChild = ({ children }: TradeGridChildProps) => {
         {({ width, height }) => (
           <div
             style={{ width, height }}
-            className="border border-default rounded-sm"
+            className="border rounded-sm border-default"
           >
             {children}
           </div>

apps/trading/components/layouts/layout-with-sidebar.tsx

@@ -13,7 +13,8 @@ export const LayoutWithSidebar = () => {
     'h-full relative z-0 grid',
     'grid-rows-[min-content_1fr_40px]',
     'lg:grid-rows-[min-content_1fr]',
-    'lg:grid-cols-[1fr_350px_40px]'
+    'lg:grid-cols-[1fr_280px_40px]',
+    'xxxl:grid-cols-[1fr_320px_40px]'
   );
 
   return (

apps/trading/pages/styles.css

@@ -83,8 +83,7 @@ html [data-theme='light'] {
   --pennant-color-volume-sell: theme(colors.market.red.DEFAULT);
 
   /* reduce space between candles */
-  --pennant-candlestick-inner-padding: 0.175;
-  --pennant-candlestick-stroke-width: 0.5;
+  --pennant-candlestick-inner-padding: 0.25;
 }
 
 html [data-theme='light'] {
@@ -162,11 +161,22 @@ html [data-theme='dark'] {
   @apply font-normal font-alpha;
 }
 
-/* Light variables */
-.ag-theme-balham {
+.ag-theme-balham,
+.ag-theme-balham-dark {
   --ag-grid-size: 2px; /* Used for compactness */
   --ag-row-height: 36px;
+  --ag-header-height: 28px;
+}
+
+@media (min-width: theme(screens.xxl)) {
+  .ag-theme-balham,
+  .ag-theme-balham-dark {
     --ag-header-height: 36px;
+  }
+}
+
+/* Light variables */
+.ag-theme-balham {
   --ag-background-color: theme(colors.white);
   --ag-border-color: theme(colors.vega.clight.600);
   --ag-header-background-color: theme(colors.vega.clight.700);
@@ -179,9 +189,6 @@ html [data-theme='dark'] {
 
 /* Dark variables */
 .ag-theme-balham-dark {
-  --ag-grid-size: 2px; /* Used for compactness */
-  --ag-row-height: 36px;
-  --ag-header-height: 36px;
   --ag-background-color: theme(colors.vega.cdark.900);
   --ag-border-color: theme(colors.vega.cdark.600);
   --ag-header-background-color: theme(colors.vega.cdark.700);
@@ -191,6 +198,7 @@ html [data-theme='dark'] {
   --ag-row-hover-color: theme(colors.vega.cdark.800);
   --ag-modal-overlay-background-color: rgb(9 11 16 / 50%);
 }
+
 .ag-theme-balham-dark .ag-row.no-hover,
 .ag-theme-balham-dark .ag-row.no-hover:hover,
 .ag-theme-balham .ag-row.no-hover,

libs/candles-chart/src/lib/candles-chart.tsx

@@ -8,13 +8,16 @@ import AutoSizer from 'react-virtualized-auto-sizer';
 import { useVegaWallet } from '@vegaprotocol/wallet';
 import { useThemeSwitcher } from '@vegaprotocol/react-helpers';
 import { t } from '@vegaprotocol/i18n';
-import { useCandlesChartSettings } from './use-candles-chart-settings';
+import {
+  STUDY_SIZE,
+  useCandlesChartSettings,
+} from './use-candles-chart-settings';
 
 export type CandlesChartContainerProps = {
   marketId: string;
 };
 
-const CANDLES_TO_WIDTH_FACTOR = 0.15;
+const CANDLES_TO_WIDTH_FACTOR = 0.2;
 
 export const CandlesChartContainer = ({
   marketId,
@@ -49,7 +52,9 @@ export const CandlesChartContainer = ({
 
   return (
     <AutoSizer>
-      {({ width, height }) => (
+      {({ width, height }) => {
+        const candlesCount = Math.floor(width * CANDLES_TO_WIDTH_FACTOR);
+        return (
           <div style={{ width, height }}>
             <CandlestickChart
               dataSource={dataSource}
@@ -60,10 +65,8 @@ export const CandlesChartContainer = ({
                 notEnoughDataText: (
                   <span className="text-xs text-center">{t('No data')}</span>
                 ),
-              initialNumCandlesToDisplay: Math.floor(
-                width * CANDLES_TO_WIDTH_FACTOR
-              ),
-              studySize: 150, // default size
+                initialNumCandlesToDisplay: candlesCount,
+                studySize: STUDY_SIZE,
                 studySizes,
               }}
               interval={interval}
@@ -75,7 +78,8 @@ export const CandlesChartContainer = ({
               onPaneChanged={handlePaneChange}
             />
           </div>
-      )}
+        );
+      }}
     </AutoSizer>
   );
 };

libs/candles-chart/src/lib/use-candles-chart-settings.ts

@@ -15,7 +15,7 @@ interface StoredSettings {
   studySizes: StudySizes;
 }
 
-export const STUDY_SIZE = 100;
+export const STUDY_SIZE = 90;
 const STUDY_ORDER: Study[] = [
   Study.FORCE_INDEX,
   Study.RELATIVE_STRENGTH_INDEX,