fix(app): match peripherals card to instrument card behavior

Author: rclarke0

app/src/organisms/Desktop/Devices/Peripherals/index.tsx

@@ -21,11 +21,13 @@ export function Peripherals({
       <StyledText desktopStyle="bodyLargeSemiBold">
         {t('peripherals')}
       </StyledText>
-      <CameraCard
-        isFlex={isFlex}
-        robotName={robotName}
-        isRobotBusy={isRobotBusy}
-      />
+      <div className={styles.card_column}>
+        <CameraCard
+          isFlex={isFlex}
+          robotName={robotName}
+          isRobotBusy={isRobotBusy}
+        />
+      </div>
     </div>
   )
 }

app/src/organisms/Desktop/Devices/Peripherals/inputdevices.module.css

@@ -9,11 +9,18 @@
   gap: var(--spacing-16);
 }
 
+.card_column {
+  display: flex;
+  flex: 0.5;
+  gap: var(--spacing-8);
+}
+
 .card_container {
   display: flex;
-  width: 19.969rem;
+  flex: 0.5;
   border-radius: var(--border-radius-8);
   background-color: var(--grey-10);
+  gap: var(--spacing-8);
 }
 
 .card_content_container {
@@ -26,7 +33,7 @@
 .card_content_text_container {
   display: flex;
   flex-direction: column;
-  padding-right: var(--spacing-24);
+  padding-right: var(--spacing-26);
   gap: var(--spacing-8);
 }