layout changes

package-lock.json

@@ -5,7 +5,6 @@
   "requires": true,
   "packages": {
     "": {
-      "name": "grainy-gradients",
       "version": "0.1.0",
       "dependencies": {
         "@ant-design/icons": "^4.6.3",

src/components/CodeBlocks/Css.tsx

@@ -44,9 +44,8 @@ export const CssControls: React.FC = () => {
           }}
         />
       </pre>
-      <GradientControls />
       <Form>
-        <Form.Item label="Show checkered">
+        <Form.Item label="Show checkered background" style={{ marginBottom: 4 }}>
           <Switch
             size="small"
             checked={showTransparency}
@@ -56,6 +55,7 @@ export const CssControls: React.FC = () => {
           />
         </Form.Item>
       </Form>
+      <GradientControls />
     </div>
   );
 };

src/components/CodeBlocks/Filter.tsx

@@ -81,7 +81,7 @@ export const FilterControls: React.FC = () => {
           }
           value={typeof brightness === 'number' ? brightness : 0}
         />
-        <Form.Item label="Invert">
+        <Form.Item label="Invert" style={{ marginBottom: 6 }}>
           <Switch
             size="small"
             checked={invert}

src/components/GradientControls/GradientRow.tsx

@@ -143,6 +143,7 @@ const TopRow = styled.div`
   display: flex;
   align-items: center;
   justify-content: space-between;
+  margin-bottom: 8px;
 `;
 
 const TopRowLeft = styled.div`