Improve layout

src/ConvolutionVisualizer.tsx

@@ -93,36 +93,38 @@ function Sidebar({
 
   return (
     <div className="flex flex-col items-center border-l border-gray-200 p-4 gap-4">
-      <input
-        ref={imageFileInputRef}
-        type="file"
-        accept="image/*"
-        onChange={(e) => {
-          const file = e.target.files?.[0];
-          if (!file) return;
-
-          const reader = new FileReader();
-          reader.onload = () => {
-            const result = reader.result;
-            if (typeof result !== "string") {
-              return;
-            }
-            setImage(result);
-          };
-          reader.readAsDataURL(file);
-        }}
-        style={{ display: "none" }}
-      />
-      <Button
-        label="Upload Image"
-        onClick={() => imageFileInputRef.current?.click()}
-      />
-      <Radio
-        label="Color option"
-        options={["Grayscale", "Color"] as const}
-        activeOption={useColor ? "Color" : "Grayscale"}
-        onChange={(option) => setUseColor(option === "Color")}
-      />
+      <div className="flex border-b border-gray-200 p-4 gap-4 pb-10">
+        <input
+          ref={imageFileInputRef}
+          type="file"
+          accept="image/*"
+          onChange={(e) => {
+            const file = e.target.files?.[0];
+            if (!file) return;
+
+            const reader = new FileReader();
+            reader.onload = () => {
+              const result = reader.result;
+              if (typeof result !== "string") {
+                return;
+              }
+              setImage(result);
+            };
+            reader.readAsDataURL(file);
+          }}
+          style={{ display: "none" }}
+        />
+        <Button
+          label="Upload Image"
+          onClick={() => imageFileInputRef.current?.click()}
+        />
+        <Radio
+          label="Color option"
+          options={["Grayscale", "Color"] as const}
+          activeOption={useColor ? "Color" : "Grayscale"}
+          onChange={(option) => setUseColor(option === "Color")}
+        />
+      </div>
       <KernelEditor
         useColor={useColor}
         colorKernel={colorKernel}
@@ -302,11 +304,10 @@ function KernelEditor({
   const loadedPresetLabel = useColor ? loadedColorPreset : loadedGrayPreset;
 
   return (
-    <div className="w-full max-w-sm border border-gray-300 rounded p-3">
-      <h3 className="text-sm font-semibold mb-2">Kernel</h3>
+    <div className="flex flex-col items-center w-full max-w-sm rounded p-3">
       <div className="flex items-end gap-2 mb-3">
         <Dropdown
-          label="Preset"
+          label="Kernel Preset"
           options={useColor ? colorPresetNames : grayPresetNames}
           activeOption={useColor ? selectedColorPreset : selectedGrayPreset}
           onChange={(option) => {