Made the site more mobile-friendly

src/app.jsx

@@ -29,10 +29,10 @@ class App extends React.Component {
 					<Container className="panel">
 						<Link to="/"><Header as="h1" textAlign="center">Mecha: Immense Warfare</Header></Link>
 						<LinkButton.Group widths="4">
-							<LinkButton to="/rules">Rules</LinkButton>
+							<LinkButton to="/rules" className="noPadding">Rules</LinkButton>
-							<LinkButton to="/cardlist">Card List</LinkButton>
+							<LinkButton to="/cardlist" className="noPadding">Card List</LinkButton>
-							<LinkButton to="/concepts">Concepts</LinkButton>
+							<LinkButton to="/concepts" className="noPadding">Concepts</LinkButton>
-							<LinkButton to="/about">About</LinkButton>
+							<LinkButton to="/about" className="noPadding">About</LinkButton>
 						</LinkButton.Group>
 						<Divider hidden />
 						<Switch>

src/pages/card_list.jsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Table, Input, Icon } from "semantic-ui-react";
+import { Table, Input, Icon, Divider } from "semantic-ui-react";
 import Papa from "papaparse";
 import tsorter from "../utilities/tsorter.js";
 
@@ -38,16 +38,19 @@ class CardList extends React.Component {
 
 		//NOTE: id must match tsorter's argument above
 		return (
-			<Table unstackable id={"cardtable"}>
+			<div className="scrollable">
-				<Table.Header>
+				<Divider hidden />
-					<Table.Row>
+				<Table unstackable id={"cardtable"}>
-						{headers}
+					<Table.Header>
-					</Table.Row>
+						<Table.Row>
-				</Table.Header>
+							{headers}
-				<Table.Body>
+						</Table.Row>
-					{content}
+					</Table.Header>
-				</Table.Body>
+					<Table.Body>
-			</Table>
+						{content}
+					</Table.Body>
+				</Table>
+			</div>
 		);
 	}
 

src/styles/shared.css

@@ -63,6 +63,16 @@ footer {
 	justify-content: flex-end;
 }
 
+.scrollable {
+	max-width: 100%;
+	overflow: auto;
+}
+
+.noPadding {
+	padding-left: 0 !important;
+	padding-right: 0 !important;
+}
+
 /* Up and Down Arrows */
 .descend:after{
 	content: "\25B2";
@@ -70,4 +80,21 @@ footer {
 
 .ascend:after{
 	content: "\25BC";
-}
+}
+
+/* Specific cases */
+thead {
+	font-weight: bold;
+}
+
+th {
+	min-width: 50px;
+}
+
+th:nth-child(1) {
+	min-width: 120px;
+}
+
+th:nth-child(4) {
+	min-width: 250px;
+}