more mobile friendly

src/components/Snippets/abilityText.js

@@ -3,6 +3,8 @@ import processString from 'react-process-string';
 import { MugicIcon, ElementIcon, DisciplineIcon, TribeIcon } from "./_icons";
 
 export function abilityText(props) {
+  if (!props.ability || props.ability.length === 0) return "";
+
   const mugic_counters = {
     regex: /([0-9x]*){{mc}}/i,
     fn: (key, result) => {

src/components/_mobile/collection/CardBase.tsx

@@ -1,4 +1,4 @@
-import { Box, Card, CardMedia, CardContent, Typography, styled } from '@mui/material';
+import { Box, Card, CardMedia, CardContent, Typography, styled, useTheme } from '@mui/material';
 import React from 'react';
 
 import { Card as ChaoticCard } from "../../common/definitions";
@@ -31,11 +31,15 @@ type componentProps = chaoticCardProps<ChaoticCard> & {
 export const CardComponent = (
   { card, ext, extend, imageCover, left, right, content, right2 }: componentProps
 ) => {
+  const theme = useTheme();
+
   const loc = card.gsx$type === "Locations";
 
   return (ext === false)
     ? (
-      <Card sx={{ display: 'flex' }} raised>
+      <Card sx={{ display: 'flex',
+        [theme.breakpoints.down('sm')]: { flexWrap: 'wrap', alignItems: "flex-start" }
+      }} raised>
         <CardMedia
           component="img"
           sx={{ width: "96px" }}
@@ -47,12 +51,14 @@ export const CardComponent = (
         <Box sx={{ marginLeft: .5, marginRight: .5, minWidth: "242px" }}>
           {left}
         </Box>
-        <Box sx={{ marginRight: "auto" }}>
-          {right}
+        <Box sx={{ display: "flex", justifyContent: 'space-between' }}>
+          <Box sx={{ marginRight: "auto", flexGrow: 1 }}>
+            {right}
+          </Box>
+          {right2 && <Box sx={{ float: "right" }}>
+            {right2}
+          </Box>}
         </Box>
-        {right2 && <Box>
-          {right2}
-        </Box>}
       </Card>
     ) : (
       <Card raised>

src/components/_mobile/collection/Search.tsx

@@ -1,9 +1,8 @@
-import React, { FormEvent, useEffect, useMemo, useReducer, useRef, useState } from 'react';
+import React, { FormEvent, useEffect, useReducer, useRef, useState } from 'react';
 import { useHistory, useLocation } from 'react-router-dom';
 import API, { sets } from '../../SpreadsheetData/API';
 import search_api from '../../collection/search/search';
-import { Loading } from '../../Snippets';
-import { Modal, Fab, Zoom, useTheme } from '@mui/material';
+import { Modal, Fab, Zoom, useTheme, Box, TextField } from '@mui/material';
 import SearchIcon from '@mui/icons-material/Search';
 
 const initInput = (() => {
@@ -169,9 +168,9 @@ export default function Search ({ setContent, setInfo }) {
     }
   };
 
-  const handleChange = (event: {target: HTMLInputElement}, obj?: string) => {
+  const handleChange = (event: {target: HTMLInputElement | HTMLTextAreaElement}, obj?: string) => {
     const { target } = event;
-    const value = target.type === 'checkbox' ? target.checked : target.value;
+    const value = target.type === 'checkbox' ? (target as HTMLInputElement).checked : target.value;
     const { name } = target;
 
     dispatchInput({
@@ -179,10 +178,6 @@ export default function Search ({ setContent, setInfo }) {
     });
   };
 
-  const form = ((loaded == false) ? <></> : <>
-
-  </>);
-
   const handleOpen = () => {
     setOpen(true);
   };
@@ -196,6 +191,25 @@ export default function Search ({ setContent, setInfo }) {
     exit: theme.transitions.duration.leavingScreen,
   };
 
+  const form = ((loaded == false) ? <></> : <Box sx={{
+    position: 'absolute' as 'absolute',
+    top: '50%',
+    left: '50%',
+    transform: 'translate(-50%, -50%)',
+    width: 400,
+    bgcolor: 'background.paper',
+    border: '2px solid #000',
+    boxShadow: 24,
+    p: 4,
+  }}>
+    <TextField 
+      id="name"
+      label="Name"
+      value={input.name}
+      onChange={(e) => handleChange(e)}
+    />
+  </Box>);
+
   return (<>
     <Modal
       open={open}

src/components/_mobile/collection/index.tsx

@@ -19,7 +19,7 @@ let theme = createTheme({
   breakpoints: {
     values: {
       xs: 0,
-      sm: 600,
+      sm: 650,
       md: 900,
       lg: 1200,
       xl: 1536,