more responsive design changes; change log added

src/app/ideas/ideas.component.css

@@ -1,3 +1,19 @@
 .ideas {
     margin: 2% 10%;
-}
+}
+
+table {
+    font-family: arial, sans-serif;
+    border-collapse: collapse;
+    width: 100%;
+  }
+
+  td, th {
+    border: 1px solid #dddddd;
+    text-align: left;
+    padding: 8px;
+  }
+
+  tr:nth-child(even) {
+    background-color: #dddddd;
+  }

src/app/ideas/ideas.component.html

@@ -19,7 +19,27 @@ <h1 class="centre">Ideas</h1>
     </ul>
 
     <p>
-        Do you have any ideas?  I would most welcome your feedback and any ideas for charts.
+        Do you have any ideas? I would most welcome your feedback and any ideas for charts.
     </p>
 
+    <section>
+
+        <hr class="divider">
+
+        <h3>Change log</h3>
+
+        <table>
+            <tr>
+                <th style="width:85%">Change</th>
+                <th>Date</th>
+            </tr>
+            <tr>
+                <td>Major change to responsive design: charts better in small screens in portrait screen orientation.
+                </td>
+                <td>01/08/2024</td>
+            </tr>
+        </table>
+
+    </section>
+
 </section>

src/app/wkts-match/wkts-match.component.ts

@@ -17,8 +17,8 @@ export class WktsMatchComponent {
   @ViewChild(BaseChartDirective) chart?: BaseChartDirective;
 
   @HostListener('window:resize', ['$event.target.innerHeight'])
-  onResize() { //event: any) {
-    // console.log(event)
+  onResize(event: any) {
+     console.log(event)
     this.chart?.chart?.resize();
   }
 

src/styles.css

@@ -132,7 +132,7 @@ body {
 /* Larger devices (769px and up) */
 @media only screen and (min-width: 992px) {
     .chart {
-        max-height: 500px;
+        max-height: 525px;
         width: 100%;
     }