Reactive UI changes

src/App.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import { Col, Container, Row } from 'react-bootstrap';
+import { Col, Container, Row, Stack } from 'react-bootstrap';
 import { useSearchParams } from 'react-router-dom';
 import { ErrorBoundary } from 'react-error-boundary';
 
@@ -70,23 +70,19 @@ const App = () => {
 
   return (
     <>
-      <AppHeader navCallback={setCurrentView} currentView={currentView} />
-        <Container fluid>
-          <Row>
-            <Col className={Util.centerHoriz + ' p-0'} style={{fontSize: '11px'}}>
-              Starred (*) items have explanations in hovertext and 'Notes' at bottom.
-            </Col>
-          </Row>
-          <Row>
-            <Col>
-              {sectionDiv(CalculatorViewChoice.KtShoot, <ShootSection/>)}
-              {sectionDiv(CalculatorViewChoice.KtFight, <FightSection/>)}
-              {sectionDiv(CalculatorViewChoice.KtShootMassAnalysis, <ShootMassAnalysisSection/>)}
-              {sectionDiv(CalculatorViewChoice.WorldOfTanks, <WorldOfTanksSection/>)}
-              {sectionDiv(CalculatorViewChoice.Deadzone, <DeadzoneSection/>)}
-            </Col>
-          </Row>
-        </Container>
+        <Stack>
+          <AppHeader navCallback={setCurrentView} currentView={currentView} />
+          <div className={Util.centerHoriz + ' p-0'} style={{fontSize: '11px'}}>
+            Starred (*) items have explanations in hovertext and 'Notes' at bottom.
+          </div>
+          <div>
+            {sectionDiv(CalculatorViewChoice.KtShoot, <ShootSection/>)}
+            {sectionDiv(CalculatorViewChoice.KtFight, <FightSection/>)}
+            {sectionDiv(CalculatorViewChoice.KtShootMassAnalysis, <ShootMassAnalysisSection/>)}
+            {sectionDiv(CalculatorViewChoice.WorldOfTanks, <WorldOfTanksSection/>)}
+            {sectionDiv(CalculatorViewChoice.Deadzone, <DeadzoneSection/>)}
+          </div>
+        </Stack>
     </>
   );
 };

src/components/ShootResultsDisplay.tsx

@@ -40,7 +40,7 @@ const ShootResultsDisplay: React.FC<Props> = (props: Props) => {
 
   const killChanceTable =
     <>
-      <Table responsive striped bordered hover size="sm" style={{ fontSize: '11px'}}>
+      <Table responsive striped bordered hover size="sm" style={{ fontSize: '11px' }}>
         <thead>
           <tr>
             <th>W</th>
@@ -71,7 +71,7 @@ const ShootResultsDisplay: React.FC<Props> = (props: Props) => {
 
   const saveToAvgDmgTable =
     <>
-      <Table bordered={true} striped={true} style={{ fontSize: '11px' }}>
+      <Table striped bordered hover size="sm" style={{ fontSize: '11px' }}>
         <thead>
           <tr>
             <th>Sv</th>
@@ -120,7 +120,7 @@ const ShootResultsDisplay: React.FC<Props> = (props: Props) => {
   const dmgProbTable =
     <>
       <span style={{ fontSize: '13px' }}>Dmg probs for exact scenario...</span>
-      <Table bordered={true} striped={true} style={{ fontSize: '11px' }}>
+      <Table responsive striped bordered hover  style={{ fontSize: '11px' }}>
         <thead>
           <tr>
             <th>Dmg</th>
@@ -138,18 +138,18 @@ const ShootResultsDisplay: React.FC<Props> = (props: Props) => {
   return (
     <Container fluid>
       <Row>
-        <Col lg={6} md={12}>
+        <Col lg={4} md={12} className='p-0'>
         <Accordion flush>
           <Accordion.Item eventKey='0'>
-            <Accordion.Header as="h6">AvgDmg for various Sv...</Accordion.Header>
+            <Accordion.Header as="h6">Average Damage</Accordion.Header>
             <Accordion.Body>{saveToAvgDmgTable}</Accordion.Body>
           </Accordion.Item>
         </Accordion>
         </Col>
-        <Col lg={6} md={12}>
+        <Col lg={8} md={12} className='p-0'>
         <Accordion flush>
           <Accordion.Item eventKey='0'>
-            <Accordion.Header as="h6">KillChances for various Sv&amp;W...</Accordion.Header>
+            <Accordion.Header as="h6">Kill Chances</Accordion.Header>
             <Accordion.Body>{killChanceTable}</Accordion.Body>
           </Accordion.Item>
         </Accordion>

src/components/ShootSection.tsx

@@ -1,10 +1,11 @@
-import React from 'react';
+import React, { useState } from 'react';
 import {
   Col,
   Container,
   Row,
 } from 'react-bootstrap';
 
+
 import ShootOptions from 'src/ShootOptions';
 import AttackerControls from "src/components/AttackerControls";
 import DefenderControls from "src/components/DefenderControls";
@@ -50,17 +51,17 @@ const ShootSection: React.FC = () => {
   ].map(note => <li key={note.name}><b>{note.name}</b>: {note.description}</li>);
 
   return (
-    <Container fluid>
+    <Container fluid = "sm">
       <h4 style={{textAlign:'center'}}>
         Kill Team 2021 Edition, Shooting
         <a href='https://www.warhammer-community.com/wp-content/uploads/2022/08/ekD0GG2pTHlYba0G.pdf'>[Lite Rules]</a>
       </h4>
-      <Row>
-        <Col>
+      <Row className='justify-content-md-center'>
+        <Col lg={4} md="auto" className='p-0'>
           <h2 style={{textAlign:'center'}}>Situation 1</h2>
           <ShootSituation/>
         </Col>
-        <Col>
+        <Col lg={4} md="auto" className="p-0">
           <h2 style={{textAlign:'center'}}>Situation 2</h2>
           <ShootSituation/>
         </Col>
@@ -76,7 +77,7 @@ const ShootSection: React.FC = () => {
           </ul>
         </Col>
       </Row>
-    </Container>
+    </Container>   
   );
 };