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,30 +89,30 @@ export const NodeSwitcher = ({ closeDialog }: { closeDialog: () => void }) => {
                 <span className="text-right">{t('Block')}</span>
                 <span className="text-right">{t('Subscription')}</span>
               </LayoutRow>
-              <div>
-                {nodes.map((node, index) => {
-                  return (
-                    <LayoutRow key={node} dataTestId="node-row">
-                      <ApolloWrapper url={node}>
-                        <RowData
-                          id={index.toString()}
-                          url={node}
-                          highestBlock={highestBlock}
-                          onBlockHeight={handleHighestBlock}
-                        />
-                      </ApolloWrapper>
-                    </LayoutRow>
-                  );
-                })}
-                <CustomRowWrapper
-                  inputText={customUrlText}
-                  setInputText={setCustomUrlText}
-                  nodes={nodes}
-                  highestBlock={highestBlock}
-                  onBlockHeight={handleHighestBlock}
-                  nodeRadio={nodeRadio}
-                />
-              </div>
+            </div>
+            <div>
+              {nodes.map((node, index) => {
+                return (
+                  <LayoutRow key={node} dataTestId="node-row">
+                    <ApolloWrapper url={node}>
+                      <RowData
+                        id={index.toString()}
+                        url={node}
+                        highestBlock={highestBlock}
+                        onBlockHeight={handleHighestBlock}
+                      />
+                    </ApolloWrapper>
+                  </LayoutRow>
+                );
+              })}
+              <CustomRowWrapper
+                inputText={customUrlText}
+                setInputText={setCustomUrlText}
+                nodes={nodes}
+                highestBlock={highestBlock}
+                onBlockHeight={handleHighestBlock}
+                nodeRadio={nodeRadio}
+              />
             </div>
           </TradingRadioGroup>
           <div className="mt-4">

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
@@ -72,27 +70,34 @@ export function Dialog({
           onInteractOutside={onInteractOutside}
           data-testid={dataTestId}
         >
-          <div className={wrapperClasses}>
-            {onChange && (
-              <DialogPrimitives.Close
-                className="absolute p-2 top-0 right-0 md:top-2 md:right-2"
-                data-testid="dialog-close"
-              >
-                <VegaIcon name={VegaIconNames.CROSS} size={24} />
-              </DialogPrimitives.Close>
+          <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="flex gap-4 max-w-full">
-              {icon && <div className="fill-current">{icon}</div>}
-              <div data-testid="dialog-content" className="flex-1 max-w-full">
-                {title && (
-                  <h1
-                    className="text-xl uppercase mb-4 pr-2"
-                    data-testid="dialog-title"
-                  >
-                    {title}
-                  </h1>
-                )}
-                <div>{children}</div>
+          >
+            <div className={wrapperClasses}>
+              {onChange && (
+                <DialogPrimitives.Close
+                  className="absolute p-2 top-0 right-0 md:top-2 md:right-2"
+                  data-testid="dialog-close"
+                >
+                  <VegaIcon name={VegaIconNames.CROSS} size={24} />
+                </DialogPrimitives.Close>
+              )}
+              <div className="flex gap-4 max-w-full">
+                {icon && <div className="fill-current">{icon}</div>}
+                <div data-testid="dialog-content" className="flex-1 max-w-full">
+                  {title && (
+                    <h1
+                      className="text-xl uppercase mb-4 pr-2"
+                      data-testid="dialog-title"
+                    >
+                      {title}
+                    </h1>
+                  )}
+                  <div>{children}</div>
+                </div>
               </div>
             </div>
           </div>

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',