fix(environment): node switcher on mobile (#5455)

libs/environment/src/components/node-switcher/layout-cell.tsx

@@ -19,16 +19,27 @@ export const LayoutCell = ({
 }: LayoutCellProps) => {
   const t = useT();
   const classes = [
-    'lg:text-right flex justify-between lg:block',
+    'lg:text-right flex lg:block justify-stretch gap-2',
     'my-2 lg:my-0',
   ];
 
   return (
     <div className={classnames(classes)}>
-      {label && <span className="lg:hidden">{label}</span>}
+      {label && (
+        <>
+          <span className="lg:hidden text-xs text-vega-clight-200 dark:text-vega-cdark-200 whitespace-nowrap">
+            {label}
+          </span>
+          <span
+            /* separator */
+            aria-hidden
+            className="border-b border-dashed border-b-vega-clight-400 dark:border-b-vega-cdark-400 w-full h-[9px]"
+          ></span>
+        </>
+      )}
       <span
         data-testid={dataTestId}
-        className={classnames('font-mono', {
+        className={classnames('font-mono text-xs lg:text-sm', {
           'text-danger': !isLoading && hasError,
           'text-muted': isLoading,
         })}

libs/environment/src/components/node-switcher/node-switcher.tsx

@@ -89,6 +89,7 @@ export const NodeSwitcher = ({ closeDialog }: { closeDialog: () => void }) => {
                 <span className="text-right">{t('Block')}</span>
                 <span className="text-right">{t('Subscription')}</span>
               </LayoutRow>
+            </div>
             <div>
               {nodes.map((node, index) => {
                 return (
@@ -113,7 +114,6 @@ export const NodeSwitcher = ({ closeDialog }: { closeDialog: () => void }) => {
                 nodeRadio={nodeRadio}
               />
             </div>
-            </div>
           </TradingRadioGroup>
           <div className="mt-4">
             <Button

libs/ui-toolkit/src/components/dialog/dialog.tsx

@@ -37,8 +37,6 @@ export function Dialog({
     'w-full h-full'
   );
   const wrapperClasses = classNames(
-    // Positions the modal in the center of screen
-    'z-20 relative rounded top-[10vh]',
     // Dimensions
     'max-w-[90vw] p-4 md:p-8',
     // Need to apply background and text colors again as content is rendered in a portal
@@ -71,6 +69,12 @@ export function Dialog({
           onCloseAutoFocus={onCloseAutoFocus}
           onInteractOutside={onInteractOutside}
           data-testid={dataTestId}
+        >
+          <div
+            className={classNames(
+              // Positions the modal in the center of screen
+              'z-20 relative rounded top-[5vw] pb-[5vw] lg:top-[10vh] lg:pb-[10vh]'
+            )}
           >
             <div className={wrapperClasses}>
               {onChange && (
@@ -96,6 +100,7 @@ export function Dialog({
                 </div>
               </div>
             </div>
+          </div>
         </DialogPrimitives.Content>
       </DialogPrimitives.Portal>
     </DialogPrimitives.Root>

libs/ui-toolkit/src/components/trading-radio-group/radio-group.tsx

@@ -57,12 +57,20 @@ interface RadioProps {
   value: string;
   label: string;
   disabled?: boolean;
+  className?: string;
 }
 
-export const TradingRadio = ({ id, value, label, disabled }: RadioProps) => {
+export const TradingRadio = ({
+  id,
+  value,
+  label,
+  disabled,
+  className,
+}: RadioProps) => {
   const wrapperClasses = classNames(
     'flex items-center gap-1.5 text-xs',
-    labelClasses
+    labelClasses,
+    className
   );
   const itemClasses = classNames(
     'flex justify-center items-center',