Implemented specific local configs and worked on some formatting updates.

src/App.css

@@ -65,3 +65,29 @@
   justify-content: inherit;
   background-color: lightgrey;
 }
+
+.key {
+  font-weight: bold;
+}
+
+.value {
+  font-style: italic;
+}
+
+@media (min-width:400px) {
+  .card-columns {
+    column-count: 1;
+  }
+}
+
+@media (min-width:800px) {
+  .card-columns {
+    column-count: 2;
+  }
+}
+
+@media (min-width:1200px) {
+  .card-columns {
+    column-count: 3;
+  }
+}

src/components/archives/ArchiveCard.js

 import React from "react";
-import { Card, Container, Row, Button } from "react-bootstrap";
+import { Card, Container, Row, Button, Image } from "react-bootstrap";
 import { NavLink } from "react-router-dom";
 
 // display a single archive on a card
@@ -7,26 +7,25 @@ export default function ArchiveCard({ archive }) {
   return (
     <Card className="card-description">
       <Card.Body>
-        <h2>{archive.name}</h2>
+        <Card.Title className="h2">{archive.name}</Card.Title>
         <Container fluid>
           <Row>
             <Card className="card-description">
               <Card.Body>
-                <img
+                <Image
+                  className="mx-auto d-block"
                   src={archive.thumbnail}
-                  alt=""
-                  height={200}
-                  width={300}
-                  className="img-fluid float-left float-sm-right float-md-left float-lg- 
-                  right float-xl-left pr-4"
+                  rounded
+                  fluid
                 />
-                <h4>{archive.short_description}</h4>
-                <p>{archive.long_description}</p>
+                <Card.Title className="h3 pt-3">{archive.short_description}</Card.Title>
+                <Card.Text className="text-justify">{archive.long_description}</Card.Text>
               </Card.Body>
             </Card>
           </Row>
           <Row className="p-2">
             <Button
+              className="mx-auto"
               as={NavLink}
               variant="outline-info"
               to={`/archives/${archive.uri}`}

src/components/archives/ArchiveDetails.js

 import React, { useContext } from "react";
 import { useParams } from "react-router-dom";
 import { GlobalContext } from "../../contexts/GlobalContext";
-import { Container, Row, Col, Card, Table, Alert } from "react-bootstrap";
+import { Container, Row, Col, Card, Table, Alert, Image } from "react-bootstrap";
 import DataProductCategories from "./DataProductCategories";
 
 export default function ArchiveDetails(props) {
   const { uri } = useParams();
   console.log(uri);
-  const { archives, defaultConfigName, setConfigName} = useContext(GlobalContext);
+  const { archives, defaultConfigName, setConfigName } = useContext(GlobalContext);
   if (!archives) return null;
 
   /* This is a nasty hack. There must be a better way! */
@@ -23,17 +23,17 @@ export default function ArchiveDetails(props) {
   console.log(archive);
 
   return (
-    <div>
+    <>
       <Container fluid>
         <Row>
           <h2 className="ml-3">Archive - {archive.name}</h2>
         </Row>
 
         <Row>
-          <Col sm={3} md={3} lg={3}>
+          <Col sm={4} md={4} lg={4}>
             <Card className="card-description">
               <Card.Body>
-                <Table striped bordered hover size="sm">
+                <Table bordered hover fluid size="sm">
                   <tbody>
                     <tr>
                       <td className="key">Instrument</td>
@@ -45,19 +45,21 @@ export default function ArchiveDetails(props) {
                     </tr>
                   </tbody>
                 </Table>
-                <img
-                  className="mb-3"
-                  alt=""
+                <Card>
+                <Image
+                  className="mx-auto d-block"
                   src={archive.thumbnail}
-                  height={200}
-                  width={300}
+                  alt=""
+                  rounded
+                  fluid
                 />
-                <h4>{archive.short_description}</h4>
-                <p>{archive.long_description}</p>
+                <Card.Title className="text-center h4 pt-3">{archive.short_description}</Card.Title>
+                <Card.Text className="text-justify m-3">{archive.long_description}</Card.Text>
+                </Card>
               </Card.Body>
             </Card>
           </Col>
-          <Col sm={9} md={9} lg={9}>
+          <Col fluid>
             <Row>
               <Col>
                 <Card className="card-description">
@@ -68,7 +70,7 @@ export default function ArchiveDetails(props) {
                 </Card>
               </Col>
             </Row>
-            <Row>
+            <Row className="pt-3">
               <Col>
                 <DataProductCategories archive={archive} />
               </Col>
@@ -76,6 +78,6 @@ export default function ArchiveDetails(props) {
           </Col>
         </Row>
       </Container>
-    </div>
+    </>
   );
 }

src/components/archives/Archives.js

 import React, { useContext } from "react";
-import { Card, Container, Row, Col } from "react-bootstrap";
+import { CardColumns} from "react-bootstrap";
 import ArchiveCard from "./ArchiveCard";
 import { GlobalContext } from "../../contexts/GlobalContext";
 
 export function Archives() {
-  const { archives } = useContext(GlobalContext);
+  const { archives, defaultConfigName, setConfigName} = useContext(GlobalContext);
   if (!archives) return null;
 
+  setConfigName(defaultConfigName);
+
   console.log("archives: ", { archives });
   return (
-    <Card>
-      <Card.Body>
-        <Container fluid>
-          <Row>
+    <CardColumns className="row-2">
             {archives.map((archive) => {
               let key = "archive-" + archive.id;
               return (
-                <Col key={key} sm={1} md={3} lg={6}>
-                  <ArchiveCard archive={archive} />
-                </Col>
+                  <ArchiveCard key={key} archive={archive} />
               );
             })}
-          </Row>
-        </Container>
-      </Card.Body>
-    </Card>
+    </CardColumns>
   );
 }

src/components/archives/DataProductCategories.js

@@ -6,7 +6,6 @@ import {
   Button,
   Row,
   Col,
-  ListGroupItem,
 } from "react-bootstrap";
 import { GlobalContext } from "../../contexts/GlobalContext";
 import axios from "axios";
@@ -28,13 +27,13 @@ export default function DataProductCategories({ archive }) {
         <Card.Title>Data Product Categories in {archive.name}</Card.Title>
 
         <ListGroup variant="flush">
-          <ListGroupItem>
+          <ListGroup.Item>
             <Row className="p-2">
-              <Col>Data Product Category</Col>
-              <Col>Catalog name</Col>
-              <Col>Categories access</Col>
+              <Col className="text-left">Data Product Category</Col>
+              <Col className="text-center">Catalog name</Col>
+              <Col className="text-center">Categories access</Col>
             </Row>
-          </ListGroupItem>
+          </ListGroup.Item>
           {categories
             .filter((category) => archive.datasets.includes(category.uri))
             .map((category) => {
@@ -84,8 +83,8 @@ export default function DataProductCategories({ archive }) {
                 <ListGroup.Item key={category.uri}>
                   <Row className="p-2 bg-light">
                     <Col>{category.name}</Col>
-                    <Col>{archive.name}</Col>
-                    <Col>{button}</Col>
+                    <Col className="text-center">{archive.name}</Col>
+                    <Col className="text-center">{button}</Col>
                   </Row>
                   <Row className="p-2 bg-light">
                     <Col>