Update examples

Author: tannerlinsley

examples/simple/src/ResizableBox.js

@@ -13,33 +13,41 @@ export default function ResizableBox({
 }) {
   return (
     <div style={{ marginLeft: 20 }}>
-      {resizable ? (
-        <ReactResizableBox width={width} height={height}>
+      <div
+        style={{
+          display: "inline-block",
+          width: "auto",
+          background: "white",
+          padding: ".5rem",
+          borderRadius: "0.5rem",
+          boxShadow: "0 30px 40px rgba(0,0,0,.1)",
+          ...style,
+        }}
+      >
+        {resizable ? (
+          <ReactResizableBox width={width} height={height}>
+            <div
+              style={{
+                width: "100%",
+                height: "100%",
+              }}
+              className={className}
+            >
+              {children}
+            </div>
+          </ReactResizableBox>
+        ) : (
           <div
             style={{
-              boxShadow: "0 20px 40px rgba(0,0,0,.1)",
-              ...style,
-              width: "100%",
-              height: "100%",
+              width: `${width}px`,
+              height: `${height}px`,
             }}
             className={className}
           >
             {children}
           </div>
-        </ReactResizableBox>
-      ) : (
-        <div
-          style={{
-            width: `${width}px`,
-            height: `${height}px`,
-            boxShadow: "0 20px 40px rgba(0,0,0,.1)",
-            ...style,
-          }}
-          className={className}
-        >
-          {children}
-        </div>
-      )}
+        )}
+      </div>
     </div>
   );
 }

examples/simple/src/styles.css

@@ -4,7 +4,6 @@ body {
 
 .react-resizable {
   max-width: 100%;
-  background: white;
 }
 
 .react-resizable-handle {