Beautify and fix responsive design

Author: jmshea

interactive/vector-addition.html

@@ -38,7 +38,7 @@
             max-width: 1200px;
             margin: 20px auto;
             gap: 20px;
-            width: 100%;
+            width: 95%;
         }
         #vector-input {
             display: flex;
@@ -59,7 +59,7 @@
         }
         #instructions {
             max-width: 800px;
-            margin: 20px auto;
+            margin: 20px 20px;
             padding: 20px;
             background-color: #fff;
             border-radius: 10px;
@@ -78,6 +78,23 @@
             }
             textarea {
                 width: 100%;
+                height: auto; /* Adjust height to content on narrow viewports */
+                min-height: 6em;
+            }
+            #plot {
+                width: 100%;
+                height: auto; /* Adjust height to content on narrow viewports */
+            }
+            #instructions {
+                margin-top: 20px; /* Add some space between plot and instructions */
+                margin-left: 5%
+                width: 85%; /* Ensure it takes full width on narrower devices */
+            }
+        }
+        @media (max-width: 480px) {
+            #intro, #instructions {
+                margin: auto 10px;
+                padding: 10px; /* Reduce padding for very small screens */
             }
         }
     </style>