Tweak sidebar styles

Author: dpolugic

src/App.tsx

@@ -66,7 +66,7 @@ const PreviewButton: React.FC<{ onClick: () => void; children: React.ReactNode }
 }) => {
   return (
     <button
-      className='text-amber-300 hover:text-black cursor-pointer p-2 hover:bg-amber-300'
+      className='text-amber-300 hover:text-black cursor-pointer p-2 hover:bg-amber-300 font-mono'
       type='button'
       onClick={onClick}
     >
@@ -167,9 +167,9 @@ function App() {
     <div className='size-full flex'>
       {previewOpen ? (
         <div className='flex-1/3 border-r-amber-300 border-r-1'>
-          <div className='flex gap-2 items-center justify-between'>
-            <h2 className='text-amber-300'>preview (wip)</h2>
+          <div className='flex gap-2 items-center justify-between pr-2 border-b-amber-300 border-b-1'>
             <PreviewButton onClick={() => setPreviewOpen(false)}>x</PreviewButton>
+            <h2 className='text-amber-300'>preview (wip)</h2>
           </div>
           <Preview state={state} />
         </div>

src/preview.tsx

@@ -29,7 +29,7 @@ function getViewBox(state: State): string {
 
 export const Preview: React.FC<{ state: State }> = ({ state }) => {
   return (
-    <div className='border-1 border-amber-300 aspect-square'>
+    <div className='border-b-1 border-amber-300 aspect-square'>
       <svg viewBox={getViewBox(state)} xmlns='http://www.w3.org/2000/svg' className='w-full aspect-square'>
         <rect
           className='stroke-amber-100'