block styles padding

Author: divi255

logicline-view/README.md

@@ -1,6 +1,7 @@
 # logicline-view
 
-A library used to display logic line state snapshots.
+A library used to display [logic line](https://github.com/roboplc/logicline)
+state snapshots.
 
 ```react-tsx
 import { useState, useEffect } from "react";

logicline-view/package.json

@@ -1,6 +1,6 @@
 {
   "name": "logicline-view",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "type": "module",
   "scripts": {
     "build": "vite build && tsc src/*.mts --skipLibCheck --allowImportingTsExtensions --esModuleInterop --jsx react-jsx --declaration --lib es2020,dom,es2021.String --downlevelIteration --emitDeclarationOnly --declarationDir dist/ && mv dist/lib.d.mts dist/logicline-view.es.d.ts",
@@ -18,6 +18,12 @@
       "require": "./dist/logicline-view.umd.js"
     }
   },
+  "author": "Bohemia Automation",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/roboplc/logicline/issues"
+  },
+  "homepage": "https://github.com/roboplc/logicline/",
   "peerDependencies": {
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.1",

logicline-view/src/components/Block/Block.css

@@ -119,6 +119,14 @@
   background-color: var(--logicline-decorator-color);
 }
 
+.logicline_block-body--filled {
+  padding: 0 6px;
+}
+
+.logicline_block-body--empty {
+  padding: 9px 6px;
+}
+
 .logicline_block-input {
   display: flex;
   align-items: center;

logicline-view/src/components/Block/Block.tsx

@@ -93,12 +93,11 @@ export const Block = ({
           {step.name}
         </div>
         <div
-          className="logicline_block-body"
-          style={{
-            padding: inputs.every((input) => input === null)
-              ? "9px 6px"
-              : "0 6px"
-          }}
+          className={`logicline_block-body ${
+            inputs.every((input) => input === null)
+              ? "logicline_block-body--empty"
+              : "logicline_block-body--filled"
+          }`}
         >
           {inputs.map((inputValue, idx) => (
             <div key={idx} className="logicline_block-input">