From a2ed9bdbf8006e1b031bd86ebcf7575a1090cdf1 Mon Sep 17 00:00:00 2001 From: LucaHaverty Date: Thu, 15 Aug 2024 15:12:18 -0700 Subject: [PATCH 1/5] Integrated subsystem config into the global config panel --- fission/index.html | 6 +- fission/src/Synthesis.tsx | 8 +- fission/src/main.tsx | 16 +- .../src/mirabuf/IntakeSensorSceneObject.ts | 25 -- fission/src/systems/input/InputSystem.ts | 12 + fission/src/ui/components/Button.tsx | 24 +- fission/src/ui/components/Checkbox.tsx | 32 ++- fission/src/ui/components/Dropdown.tsx | 21 +- fission/src/ui/components/Label.tsx | 7 +- fission/src/ui/components/MainHUD.tsx | 83 ++++-- fission/src/ui/components/Modal.tsx | 105 +++++--- fission/src/ui/components/Panel.tsx | 24 +- fission/src/ui/components/SelectButton.tsx | 7 +- fission/src/ui/components/Slider.tsx | 24 +- .../src/ui/components/StyledComponents.tsx | 60 ++++- .../src/ui/components/ToggleButtonGroup.tsx | 14 +- fission/src/ui/modals/ViewModal.tsx | 2 +- .../ui/modals/configuring/SettingsModal.tsx | 29 +-- .../mirabuf/ImportLocalMirabufModal.tsx | 42 ++- .../src/ui/modals/spawning/SpawningModals.tsx | 246 ------------------ fission/src/ui/panels/DebugPanel.tsx | 149 ++++++----- .../configuring/ChooseInputSchemePanel.tsx | 2 - ...l.tsx => ConfigureSubsystemsInterface.tsx} | 108 ++++---- .../assembly-config/ConfigurePanel.tsx | 9 +- .../ConfigureGamepiecePickupInterface.tsx | 2 +- .../inputs/ConfigureSchemeInterface.tsx | 1 + .../interfaces/inputs/EditInputInterface.tsx | 29 ++- .../ConfigureScoringZonesInterface.tsx | 42 ++- .../ui/panels/mirabuf/ImportMirabufPanel.tsx | 24 +- 29 files changed, 566 insertions(+), 587 deletions(-) delete mode 100644 fission/src/ui/modals/spawning/SpawningModals.tsx rename fission/src/ui/panels/configuring/{ConfigureSubsystemsPanel.tsx => ConfigureSubsystemsInterface.tsx} (76%) diff --git a/fission/index.html b/fission/index.html index 5916fa6750..b3a5d0fd1c 100644 --- a/fission/index.html +++ b/fission/index.html @@ -12,7 +12,11 @@ rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" /> - + + Fission | Synthesis diff --git a/fission/src/Synthesis.tsx b/fission/src/Synthesis.tsx index c1d33806ca..031859ab0c 100644 --- a/fission/src/Synthesis.tsx +++ b/fission/src/Synthesis.tsx @@ -36,12 +36,10 @@ import ThemeEditorModal from "@/modals/configuring/theme-editor/ThemeEditorModal import MatchModeModal from "@/modals/spawning/MatchModeModal" import RobotSwitchPanel from "@/panels/RobotSwitchPanel" import SpawnLocationsPanel from "@/panels/SpawnLocationPanel" -import ConfigureSubsystemsPanel from "@/ui/panels/configuring/ConfigureSubsystemsPanel.tsx" import ScoreboardPanel from "@/panels/information/ScoreboardPanel" import DriverStationPanel from "@/panels/simulation/DriverStationPanel" import PokerPanel from "@/panels/PokerPanel.tsx" import World from "@/systems/World.ts" -import { AddRobotsModal, AddFieldsModal, SpawningModal } from "@/modals/spawning/SpawningModals.tsx" import ImportLocalMirabufModal from "@/modals/mirabuf/ImportLocalMirabufModal.tsx" import ImportMirabufPanel from "@/ui/panels/mirabuf/ImportMirabufPanel.tsx" import Skybox from "./ui/components/Skybox.tsx" @@ -166,7 +164,7 @@ function Synthesis() { closeAllPanels={closeAllPanels} > - + {panelElements.length > 0 && panelElements} @@ -193,9 +191,6 @@ function Synthesis() { const initialModals = [ , - , - , - , , , , @@ -242,7 +237,6 @@ const initialPanels: ReactElement[] = [ , , , - , ] export default Synthesis diff --git a/fission/src/main.tsx b/fission/src/main.tsx index 3b761d8ab3..167538c689 100644 --- a/fission/src/main.tsx +++ b/fission/src/main.tsx @@ -11,16 +11,16 @@ const defaultColors: Theme = { above: [], }, InteractiveElementLeft: { - color: { r: 224, g: 130, b: 65, a: 1 }, + color: { r: 207, g: 114, b: 57, a: 1 }, above: ["Background", "BackgroundSecondary"], }, InteractiveElementRight: { - color: { r: 218, g: 102, b: 89, a: 1 }, + color: { r: 212, g: 75, b: 62, a: 1 }, above: ["Background", "BackgroundSecondary"], }, Background: { color: { r: 0, g: 0, b: 0, a: 1 }, above: [] }, - BackgroundSecondary: { color: { r: 30, g: 30, b: 30, a: 1 }, above: [] }, - InteractiveBackground: { color: { r: 52, g: 58, b: 64, a: 1 }, above: [] }, + BackgroundSecondary: { color: { r: 18, g: 18, b: 18, a: 1 }, above: [] }, + InteractiveBackground: { color: { r: 40, g: 44, b: 47, a: 1 }, above: [] }, MainText: { color: { r: 255, g: 255, b: 255, a: 1 }, above: [ @@ -33,8 +33,8 @@ const defaultColors: Theme = { ], }, Scrollbar: { color: { r: 170, g: 170, b: 170, a: 1 }, above: [] }, - AcceptButton: { color: { r: 71, g: 138, b: 226, a: 1 }, above: [] }, - CancelButton: { color: { r: 231, g: 85, b: 81, a: 1 }, above: [] }, + AcceptButton: { color: { r: 33, g: 137, b: 228, a: 1 }, above: [] }, + CancelButton: { color: { r: 248, g: 78, b: 78, a: 1 }, above: [] }, InteractiveElementText: { color: { r: 255, g: 255, b: 255, a: 1 }, above: [], @@ -63,8 +63,8 @@ const defaultColors: Theme = { SkyboxTop: { color: { r: 255, g: 255, b: 255, a: 1 }, above: [] }, SkyboxBottom: { color: { r: 255, g: 255, b: 255, a: 1 }, above: [] }, FloorGrid: { color: { r: 93, g: 93, b: 93, a: 1 }, above: [] }, - MatchRedAlliance: { color: { r: 255, g: 0, b: 0, a: 1 }, above: [] }, - MatchBlueAlliance: { color: { r: 0, g: 0, b: 255, a: 1 }, above: [] }, + MatchRedAlliance: { color: { r: 180, g: 20, b: 20, a: 1 }, above: [] }, + MatchBlueAlliance: { color: { r: 20, g: 20, b: 180, a: 1 }, above: [] }, ToastInfo: { color: { r: 126, g: 34, b: 206, a: 1 }, above: [] }, ToastWarning: { color: { r: 234, g: 179, b: 8, a: 1 }, above: [] }, ToastError: { color: { r: 239, g: 68, b: 68, a: 1 }, above: [] }, diff --git a/fission/src/mirabuf/IntakeSensorSceneObject.ts b/fission/src/mirabuf/IntakeSensorSceneObject.ts index 517ab86423..bd8986afbe 100644 --- a/fission/src/mirabuf/IntakeSensorSceneObject.ts +++ b/fission/src/mirabuf/IntakeSensorSceneObject.ts @@ -20,14 +20,10 @@ class IntakeSensorSceneObject extends SceneObject { private _deltaTransformation?: THREE.Matrix4 private _joltBodyId?: Jolt.BodyID - private _mesh?: THREE.Mesh private _collision?: (e: OnContactPersistedEvent) => void public constructor(parentAssembly: MirabufSceneObject) { super() - - console.debug("Trying to create intake sensor...") - this._parentAssembly = parentAssembly } @@ -47,12 +43,6 @@ class IntakeSensorSceneObject extends SceneObject { return } - this._mesh = World.SceneRenderer.CreateSphere( - this._parentAssembly.intakePreferences.zoneDiameter / 2.0, - World.SceneRenderer.CreateToonMaterial(0x5eeb67) - ) - World.SceneRenderer.scene.add(this._mesh) - this._collision = (event: OnContactPersistedEvent) => { const brain = this._parentAssembly.brain const brainIndex = brain instanceof SynthesisBrain ? brain.brainIndex ?? -1 : -1 @@ -71,8 +61,6 @@ class IntakeSensorSceneObject extends SceneObject { } OnContactPersistedEvent.AddListener(this._collision) - - console.debug("Intake sensor created successfully!") } } @@ -88,25 +76,12 @@ class IntakeSensorSceneObject extends SceneObject { World.PhysicsSystem.SetBodyPosition(this._joltBodyId, ThreeVector3_JoltVec3(position)) World.PhysicsSystem.SetBodyRotation(this._joltBodyId, ThreeQuaternion_JoltQuat(rotation)) - - if (this._mesh) { - this._mesh.position.setFromMatrixPosition(bodyTransform) - this._mesh.rotation.setFromRotationMatrix(bodyTransform) - } } } public Dispose(): void { - console.debug("Destroying intake sensor") - if (this._joltBodyId) { World.PhysicsSystem.DestroyBodyIds(this._joltBodyId) - - if (this._mesh) { - this._mesh.geometry.dispose() - ;(this._mesh.material as THREE.Material).dispose() - World.SceneRenderer.scene.remove(this._mesh) - } } if (this._collision) OnContactPersistedEvent.RemoveListener(this._collision) diff --git a/fission/src/systems/input/InputSystem.ts b/fission/src/systems/input/InputSystem.ts index d56aadd692..cf7148552c 100644 --- a/fission/src/systems/input/InputSystem.ts +++ b/fission/src/systems/input/InputSystem.ts @@ -159,9 +159,21 @@ class InputSystem extends WorldSystem { this.gamepadDisconnected = this.gamepadDisconnected.bind(this) window.addEventListener("gamepaddisconnected", this.gamepadDisconnected) + // Detect when the user leaves the page to clear inputs document.addEventListener("visibilitychange", () => { if (document.hidden) this.clearKeyData() }) + + // Disable gesture inputs on track pad to zoom into UI + window.addEventListener( + "wheel", + function (e) { + if (e.ctrlKey) { + e.preventDefault() // Prevent the zoom + } + }, + { passive: false } + ) } public Update(_: number): void { diff --git a/fission/src/ui/components/Button.tsx b/fission/src/ui/components/Button.tsx index 997a2081af..c5fe2e115e 100644 --- a/fission/src/ui/components/Button.tsx +++ b/fission/src/ui/components/Button.tsx @@ -42,13 +42,23 @@ const Button: React.FC = ({ value, colorOverrideClass, sizeOverride return ( {value} diff --git a/fission/src/ui/components/Checkbox.tsx b/fission/src/ui/components/Checkbox.tsx index 6ebdd578f8..48cbcddf31 100644 --- a/fission/src/ui/components/Checkbox.tsx +++ b/fission/src/ui/components/Checkbox.tsx @@ -1,7 +1,8 @@ import React, { useState } from "react" -import Stack, { StackDirection } from "./Stack" import Label, { LabelSize } from "./Label" import { Switch } from "@mui/base/Switch" +import { Box } from "@mui/material" +import { LabelWithTooltip } from "./StyledComponents" type CheckboxProps = { label: string @@ -10,13 +11,30 @@ type CheckboxProps = { stateOverride?: boolean hideLabel?: boolean onClick?: (checked: boolean) => void + tooltipText?: string } -const Checkbox: React.FC = ({ label, className, defaultState, stateOverride, hideLabel, onClick }) => { +const Checkbox: React.FC = ({ + label, + className, + defaultState, + stateOverride, + hideLabel, + onClick, + tooltipText, +}) => { const [state] = useState(defaultState) return ( - - {hideLabel ? null : ( + + {hideLabel ? null : tooltipText ? ( + LabelWithTooltip(label, tooltipText) + ) : ( @@ -25,14 +43,14 @@ const Checkbox: React.FC = ({ label, className, defaultState, sta onChange={(e: React.ChangeEvent) => onClick && onClick(e.target.checked)} slotProps={{ root: { - className: `group relative inline-block w-[24px] h-[24px] m-2.5 cursor-pointer`, + className: `group relative inline-block w-[24px] h-[24px] m-2.5 cursor-pointer transform transition-transform hover:scale-[1.03] active:scale-[1.06]`, }, input: { className: `cursor-inherit absolute w-full h-full top-0 left-0 opacity-0 z-10 border-none`, }, track: ownerState => { return { - className: `absolute block w-full h-full transition rounded-full border border-solid outline-none border-interactive-element-right dark:border-interactive-element-right group-[.base--focusVisible]:shadow-outline-switch ${ownerState.checked ? "bg-gradient-to-br from-interactive-element-left to-interactive-element-right" : "bg-background-secondary"}`, + className: `absolute block w-full h-full transition rounded-full border border-solid outline-none border-interactive-element-right dark:border-interactive-element-right group-[.base--focusVisible]:shadow-outline-switch ${ownerState.checked ? "bg-gradient-to-br from-interactive-element-left to-interactive-element-right" : "bg-background-secondary"} transform transition-transform group-hover:scale-[1.03] group-active:scale-[1.06]`, } }, thumb: { @@ -41,7 +59,7 @@ const Checkbox: React.FC = ({ label, className, defaultState, sta }} defaultChecked={stateOverride != null ? undefined : state} /> - + ) } diff --git a/fission/src/ui/components/Dropdown.tsx b/fission/src/ui/components/Dropdown.tsx index d5ba480505..378a4aa040 100644 --- a/fission/src/ui/components/Dropdown.tsx +++ b/fission/src/ui/components/Dropdown.tsx @@ -1,5 +1,5 @@ import React, { useEffect, useRef, useState } from "react" -import { styled } from "@mui/system" +import { alpha, styled } from "@mui/system" import { Menu, MenuItem, Button, Tooltip } from "@mui/material" import { colorNameToVar } from "../ThemeContext" @@ -35,6 +35,9 @@ const CustomButton = styled(Button)({ border: "0 !important", backgroundColor: colorNameToVar("BackgroundSecondary"), }, + "& .MuiTouchRipple-root": { + color: "#ffffff30", + }, }) const CustomMenu = styled(Menu)({ @@ -45,9 +48,17 @@ const CustomMenu = styled(Menu)({ minWidth: "unset", }, "& .MuiMenuItem-root": { - "transition": "background-color 0.3s ease, color 0.3s ease", + "transition": "background-color 0.3s ease, color 0.3s ease, transform 0.2s ease", + "transform": "scale(1.06)", "&:hover": { color: "#da6659", + transform: "scale(1.05)", + }, + "&:active": { + transform: "scale(1.03)", + }, + "& .MuiTouchRipple-root": { + color: alpha("#d44a3e", 0.3), }, }, }) @@ -102,7 +113,11 @@ const Dropdown: React.FC = ({ options, defaultValue, onSelect, la )}
- + {selectedValue || "Select an option"}
diff --git a/fission/src/ui/components/Label.tsx b/fission/src/ui/components/Label.tsx index 1aa786aacd..96d569411f 100644 --- a/fission/src/ui/components/Label.tsx +++ b/fission/src/ui/components/Label.tsx @@ -29,7 +29,12 @@ type LabelProps = { } const Label: React.FC = ({ children, size, className }) => ( - {children} + + {children} + ) export default Label diff --git a/fission/src/ui/components/MainHUD.tsx b/fission/src/ui/components/MainHUD.tsx index e42c0f00c9..5475f3e9f2 100644 --- a/fission/src/ui/components/MainHUD.tsx +++ b/fission/src/ui/components/MainHUD.tsx @@ -1,5 +1,4 @@ import React, { useEffect, useState } from "react" -import { BiMenuAltLeft } from "react-icons/bi" import { FaXmark } from "react-icons/fa6" import { useModalControlContext } from "@/ui/ModalContext" import { usePanelControlContext } from "@/ui/PanelContext" @@ -8,8 +7,9 @@ import logo from "@/assets/autodesk_logo.png" import { ToastType, useToastContext } from "@/ui/ToastContext" import APS, { APS_USER_INFO_UPDATE_EVENT } from "@/aps/APS" import { UserIcon } from "./UserIcon" -import { Button } from "@mui/base/Button" import { ButtonIcon, SynthesisIcons } from "./StyledComponents" +import { Button } from "@mui/base" +import { Box } from "@mui/material" type ButtonProps = { value: string @@ -23,11 +23,23 @@ const MainHUDButton: React.FC = ({ value, icon, onClick, larger }) return ( ) } @@ -58,12 +70,29 @@ const MainHUD: React.FC = () => { return ( <> {!isOpen && ( - + + + setIsOpen(!isOpen)} value={SynthesisIcons.OpenHudIcon} /> + + + )} { className="fixed flex flex-col gap-2 bg-gradient-to-b from-interactive-element-right to-interactive-element-left w-min p-4 rounded-3xl ml-4 top-1/2 -translate-y-1/2" >
- + } + value={} onClick={() => setIsOpen(false)} />
@@ -84,35 +122,34 @@ const MainHUD: React.FC = () => { larger={true} onClick={() => openPanel("import-mirabuf")} /> -
+ openModal("settings")} /> - {/* openModal("view")} /> */} openPanel("subsystem-config")} - /> - openPanel("configure")} /> { openPanel("debug") }} /> -
+ {userInfo ? ( = ({ {name && ( )}
{children}
- + {(cancelEnabled || middleEnabled || acceptEnabled) && ( + + )} ) diff --git a/fission/src/ui/components/Panel.tsx b/fission/src/ui/components/Panel.tsx index b8faee4977..bed0ec4fa6 100644 --- a/fission/src/ui/components/Panel.tsx +++ b/fission/src/ui/components/Panel.tsx @@ -132,7 +132,17 @@ const Panel: React.FC = ({ {name && ( )}
= ({ }} className={`${ cancelBlocked ? "bg-interactive-background" : "bg-cancel-button" - } rounded-md cursor-pointer px-4 py-1 font-bold duration-100 hover:brightness-90`} + } rounded-md cursor-pointer px-4 py-1 font-bold duration-100 hover:brightness-90 + transform transition-transform hover:scale-[1.03] active:scale-[1.06]`} + style={{ fontWeight: "bold" }} /> )} {middleEnabled && ( @@ -170,7 +182,9 @@ const Panel: React.FC = ({ }} className={`${ middleBlocked ? "bg-interactive-background" : "bg-accept-button" - } rounded-md cursor-pointer px-4 py-1 font-bold duration-100 hover:brightness-90`} + } rounded-md cursor-pointer px-4 py-1 font-bold duration-100 hover:brightness-90 + transform transition-transform hover:scale-[1.03] active:scale-[1.06]`} + style={{ fontWeight: "bold" }} /> )} {acceptEnabled && ( @@ -183,7 +197,9 @@ const Panel: React.FC = ({ }} className={`${ acceptBlocked ? "bg-interactive-background" : "bg-accept-button" - } rounded-md cursor-pointer px-4 py-1 font-bold duration-100 hover:brightness-90`} + } rounded-md cursor-pointer px-4 py-1 font-bold duration-100 hover:brightness-90 + transform transition-transform hover:scale-[1.03] active:scale-[1.06]`} + style={{ fontWeight: "bold" }} /> )}
diff --git a/fission/src/ui/components/SelectButton.tsx b/fission/src/ui/components/SelectButton.tsx index 3d7e018669..65e277dbb5 100644 --- a/fission/src/ui/components/SelectButton.tsx +++ b/fission/src/ui/components/SelectButton.tsx @@ -1,10 +1,10 @@ import React, { useCallback, useEffect, useRef, useState } from "react" import Button, { ButtonSize } from "./Button" -import Label, { LabelSize } from "./Label" import Stack, { StackDirection } from "./Stack" import World from "@/systems/World" import { ThreeVector3_JoltVec3 } from "@/util/TypeConversions" import Jolt from "@barclah/jolt-physics" +import { LabelWithTooltip } from "./StyledComponents" // raycasting constants const RAY_MAX_LENGTH = 20.0 @@ -70,7 +70,10 @@ const SelectButton: React.FC = ({ colorClass, size, value, pl return ( - + {LabelWithTooltip( + "Select parent node", + "Select the parent node for this object to follow. Click the button below, then click a part of the robot or field." + )} - ) - })} - - - ) : ( - <> - {drivers ? ( - - {/** Drivetrain row. Then other SliderDrivers and HingeDrivers */} + <> + {drivers ? ( + + {/** Drivetrain row. Then other SliderDrivers and HingeDrivers */} + { + return selectedRobot + })()} + driver={(() => { + return drivers.filter(x => x instanceof WheelDriver)[0] + })()} + /> + {drivers + .filter(x => x instanceof SliderDriver || x instanceof HingeDriver) + .map((driver: Driver, i: number) => ( { return selectedRobot })()} driver={(() => { - return drivers.filter(x => x instanceof WheelDriver)[0] + return driver })()} /> - {drivers - .filter(x => x instanceof SliderDriver || x instanceof HingeDriver) - .map((driver: Driver, i: number) => ( - { - return selectedRobot - })()} - driver={(() => { - return driver - })()} - /> - ))} - - ) : ( - - )} - + ))} + + ) : ( + )} - + ) } -export default ConfigureSubsystemsPanel +export default ConfigureSubsystemsInterface diff --git a/fission/src/ui/panels/configuring/assembly-config/ConfigurePanel.tsx b/fission/src/ui/panels/configuring/assembly-config/ConfigurePanel.tsx index 245ad48311..ec527ac26d 100644 --- a/fission/src/ui/panels/configuring/assembly-config/ConfigurePanel.tsx +++ b/fission/src/ui/panels/configuring/assembly-config/ConfigurePanel.tsx @@ -18,11 +18,13 @@ import Button from "@/ui/components/Button" import { setSelectedBrainIndexGlobal } from "../ChooseInputSchemePanel" import ConfigureSchemeInterface from "./interfaces/inputs/ConfigureSchemeInterface" import { SynthesisIcons } from "@/ui/components/StyledComponents" +import ConfigureSubsystemsInterface from "../ConfigureSubsystemsInterface" enum ConfigMode { INTAKE, EJECTOR, MOTORS, + SUBSYSTEMS, CONTROLS, SCORING_ZONES, } @@ -127,6 +129,7 @@ const robotModes = [ new ConfigModeSelectionOption("Intake", ConfigMode.INTAKE), new ConfigModeSelectionOption("Ejector", ConfigMode.EJECTOR), new ConfigModeSelectionOption("Sequential Joints", ConfigMode.MOTORS), + new ConfigModeSelectionOption("Subsystems", ConfigMode.SUBSYSTEMS), new ConfigModeSelectionOption("Controls", ConfigMode.CONTROLS), ] const fieldModes = [new ConfigModeSelectionOption("Scoring Zones", ConfigMode.SCORING_ZONES)] @@ -164,6 +167,8 @@ const ConfigInterface: React.FC = ({ configMode, assembly, return case ConfigMode.MOTORS: return + case ConfigMode.SUBSYSTEMS: + return case ConfigMode.CONTROLS: { const brainIndex = (assembly.brain as SynthesisBrain).brainIndex const scheme = InputSystem.brainIndexSchemeMap.get(brainIndex) @@ -224,8 +229,8 @@ const ConfigurePanel: React.FC = ({ panelId }) => { return ( = ({ select min={MIN_ZONE_SIZE} max={MAX_ZONE_SIZE} value={zoneSize} - label="Size" + label="Zone Size" format={{ minimumFractionDigits: 2, maximumFractionDigits: 2 }} onChange={(_, vel: number | number[]) => { setZoneSize(vel as number) diff --git a/fission/src/ui/panels/configuring/assembly-config/interfaces/inputs/ConfigureSchemeInterface.tsx b/fission/src/ui/panels/configuring/assembly-config/interfaces/inputs/ConfigureSchemeInterface.tsx index f2a3721704..220191cab3 100644 --- a/fission/src/ui/panels/configuring/assembly-config/interfaces/inputs/ConfigureSchemeInterface.tsx +++ b/fission/src/ui/panels/configuring/assembly-config/interfaces/inputs/ConfigureSchemeInterface.tsx @@ -56,6 +56,7 @@ const ConfigureSchemeInterface: React.FC = ({ selectedScheme setUseGamepad(val) selectedScheme.usesGamepad = val }} + tooltipText="Supported controllers: Xbox one, Xbox 360." /> diff --git a/fission/src/ui/panels/configuring/assembly-config/interfaces/inputs/EditInputInterface.tsx b/fission/src/ui/panels/configuring/assembly-config/interfaces/inputs/EditInputInterface.tsx index d351551a86..33ef12b7ab 100644 --- a/fission/src/ui/panels/configuring/assembly-config/interfaces/inputs/EditInputInterface.tsx +++ b/fission/src/ui/panels/configuring/assembly-config/interfaces/inputs/EditInputInterface.tsx @@ -112,20 +112,23 @@ const EditInputInterface: React.FC = ({ input, useGamepad, onInp gap="10px" alignItems={"center"} justifyContent={"space-between"} + width={"98%"} > -