From 023d84c3505202e5ccc40ff50abb6307eacf4ba3 Mon Sep 17 00:00:00 2001
From: "plebeius.eth" <mottoes_recap0u@icloud.com>
Date: Sat, 10 Jun 2023 12:28:21 +0200
Subject: [PATCH] improve PostOnHover positioning logic

---
 src/components/PostOnHover.jsx         |  12 ++-
 src/components/StateLabel.jsx          |   2 -
 src/components/views/All.jsx           | 102 +++++++++++++++++------
 src/components/views/Board.jsx         | 109 ++++++++++++++++++-------
 src/components/views/Subscriptions.jsx | 102 +++++++++++++++++------
 src/components/views/Thread.jsx        |  85 +++++++++++++------
 6 files changed, 298 insertions(+), 114 deletions(-)

diff --git a/src/components/PostOnHover.jsx b/src/components/PostOnHover.jsx
index 095eddce..5683234a 100644
--- a/src/components/PostOnHover.jsx
+++ b/src/components/PostOnHover.jsx
@@ -22,8 +22,16 @@ const PostOnHover = ({ cid, feed }) => {
   const stateString = useStateString(reply);
 
   return (
-    <Container selectedStyle={selectedStyle} style={{margin: '0', padding: '0',
-      whiteSpace: 'nowrap', overflow: 'visible'}}>
+    <Container selectedStyle={selectedStyle} style={{
+      margin: '0', 
+      padding: '0',
+      whiteSpace: 'normal',
+      maxWidth: '100vw',
+      overflowWrap: 'break-word',
+      wordWrap: 'break-word',
+      wordBreak: 'break-all',
+      boxSizing: 'border-box',
+  }}>
       <BoardForm selectedStyle={selectedStyle} style={{margin: '0', padding: '0'}}>
         <div className="board" style={{margin: '0', padding: '0'}}>
           <div className="thread" style={{margin: '0', padding: '0'}}>
diff --git a/src/components/StateLabel.jsx b/src/components/StateLabel.jsx
index 57243607..b4c69f0a 100644
--- a/src/components/StateLabel.jsx
+++ b/src/components/StateLabel.jsx
@@ -15,8 +15,6 @@ const StateLabel = ({ commentIndex, className }) => {
 
   if (commentIndex === undefined) return null;
 
-  console.log(commentIndex, stateString, comment);
-
   return (
     commentIndex && stateString !== "Succeeded" ? (
       (comment.state === "failed" || (stateString === undefined && !isLoading)) ? (
diff --git a/src/components/views/All.jsx b/src/components/views/All.jsx
index b83b8f5c..62a2d8e0 100755
--- a/src/components/views/All.jsx
+++ b/src/components/views/All.jsx
@@ -198,8 +198,8 @@ const All = () => {
 
   useLayoutEffect(() => {
     if (postOnHoverRef.current) {
-        const rect = postOnHoverRef.current.getBoundingClientRect();
-        setPostOnHoverHeight(rect.height);
+      const rect = postOnHoverRef.current.getBoundingClientRect();
+      setPostOnHoverHeight(rect.height);
     }
   }, [outOfViewCid]);
 
@@ -542,10 +542,22 @@ const All = () => {
                                     handleQuoteHover(reply, null, () => {
                                       setOutOfViewCid(reply.cid);
                                       const rect = backlinkRefs.current[reply.cid].getBoundingClientRect();
-                                      setOutOfViewPosition({
-                                        top: rect.top + window.scrollY - rect.height / 2,
-                                        left: rect.left + rect.width + 5,
-                                      });
+                                      const distanceToRight = window.innerWidth - rect.right;
+                                    
+                                        if (distanceToRight < 200) {
+                                          setOutOfViewPosition({
+                                            top: rect.top + window.scrollY - rect.height / 2,
+                                            left: rect.left - rect.innerWidth - 5,
+                                            maxWidth: rect.left
+                                          });
+
+                                        } else {
+                                          setOutOfViewPosition({
+                                            top: rect.top + window.scrollY - rect.height / 2,
+                                            left: rect.left + rect.width - 5,
+                                            maxWidth: window.innerWidth - rect.left - rect.width
+                                          });
+                                        }
                                     });
                                   }}
                                   onMouseLeave={() => {
@@ -747,10 +759,22 @@ const All = () => {
                                       handleQuoteHover(reply, null, () => {
                                         setOutOfViewCid(reply.cid);
                                         const rect = backlinkRefs.current[reply.cid].getBoundingClientRect();
-                                        setOutOfViewPosition({
-                                          top: rect.top + window.scrollY - rect.height / 2,
-                                          left: rect.left + rect.width + 5,
-                                        });
+                                        const distanceToRight = window.innerWidth - rect.right;
+                                    
+                                        if (distanceToRight < 200) {
+                                          setOutOfViewPosition({
+                                            top: rect.top + window.scrollY - rect.height / 2,
+                                            left: rect.left - rect.innerWidth - 5,
+                                            maxWidth: rect.left
+                                          });
+
+                                        } else {
+                                          setOutOfViewPosition({
+                                            top: rect.top + window.scrollY - rect.height / 2,
+                                            left: rect.left + rect.width - 5,
+                                            maxWidth: window.innerWidth - rect.left - rect.width
+                                          });
+                                        }
                                       });
                                     }}
                                     onMouseLeave={() => {
@@ -836,10 +860,22 @@ const All = () => {
                                           setOutOfViewCid(reply.parentCid);
                                           console.log("risposta: ", reply.parentCid);
                                           const rect = quoteRefs.current[shortParentCid].getBoundingClientRect();
+                                          const distanceToRight = window.innerWidth - rect.right;
+                                    
+                                        if (distanceToRight < 200) {
                                           setOutOfViewPosition({
                                             top: rect.top + window.scrollY - rect.height / 2,
-                                            left: rect.left + rect.width + 5,
+                                            left: rect.left - rect.innerWidth - 5,
+                                            maxWidth: rect.left
                                           });
+
+                                        } else {
+                                          setOutOfViewPosition({
+                                            top: rect.top + window.scrollY - rect.height / 2,
+                                            left: rect.left + rect.width - 5,
+                                            maxWidth: window.innerWidth - rect.left - rect.width
+                                          });
+                                        }
                                         }
                                       });
                                     }}                                
@@ -871,10 +907,22 @@ const All = () => {
                                       } else {
                                         setOutOfViewCid(reply.parentCid);
                                         const rect = quoteRefs.current[shortParentCid].getBoundingClientRect();
-                                        setOutOfViewPosition({
-                                          top: rect.top + window.scrollY - rect.height / 2,
-                                          left: rect.left + rect.width + 5,
-                                        });
+                                        const distanceToRight = window.innerWidth - rect.right;
+                                    
+                                        if (distanceToRight < 200) {
+                                          setOutOfViewPosition({
+                                            top: rect.top + window.scrollY - rect.height / 2,
+                                            left: rect.left - rect.innerWidth - 5,
+                                            maxWidth: rect.left
+                                          });
+
+                                        } else {
+                                          setOutOfViewPosition({
+                                            top: rect.top + window.scrollY - rect.height / 2,
+                                            left: rect.left + rect.width - 5,
+                                            maxWidth: window.innerWidth - rect.left - rect.width
+                                          });
+                                        }
                                       }
                                     });
                                   }}                                
@@ -1247,23 +1295,23 @@ const All = () => {
               <PostLoader />
             )}
           </div>
-          {createPortal(
+          {outOfViewCid && outOfViewPosition && createPortal(
             <div
-            ref={postOnHoverRef}
+              ref={postOnHoverRef}
               style={{
-                display: outOfViewCid ? "block" : "none",
+                display: "block",
                 position: "absolute",
                 top: outOfViewPosition.top - postOnHoverHeight / 2 + 10,
-                left: outOfViewPosition.left, 
+                left: outOfViewPosition.left,
+                maxWidth: outOfViewPosition.maxWidth,
               }}
-              >
-                <PostOnHover
-                  cid={outOfViewCid}
-                  feed={feed}
-                />
-              </div>
-            , document.body
-          )}
+            >
+              <PostOnHover
+                cid={outOfViewCid}
+                feed={feed}
+              />
+            </div>
+          , document.body)}
         </BoardForm>
         <Footer selectedStyle={selectedStyle}>
           <Break id="break" selectedStyle={selectedStyle} style={{
diff --git a/src/components/views/Board.jsx b/src/components/views/Board.jsx
index f033d3b5..ea52f5ab 100755
--- a/src/components/views/Board.jsx
+++ b/src/components/views/Board.jsx
@@ -528,14 +528,16 @@ const Board = () => {
     }
   };
 
+
   useLayoutEffect(() => {
     if (postOnHoverRef.current) {
-        const rect = postOnHoverRef.current.getBoundingClientRect();
-        setPostOnHoverHeight(rect.height);
+      const rect = postOnHoverRef.current.getBoundingClientRect();
+      setPostOnHoverHeight(rect.height);
     }
   }, [outOfViewCid]);
 
   
+
   return (
     <>
       <Helmet>
@@ -989,14 +991,26 @@ const Board = () => {
                                     onMouseOver={(event) => {
                                       event.stopPropagation();
                                       handleQuoteHover(reply, null, () => {
-                                        setOutOfViewCid(reply.cid);
                                         const rect = backlinkRefs.current[reply.cid].getBoundingClientRect();
-                                        setOutOfViewPosition({
-                                          top: rect.top + window.scrollY - rect.height / 2,
-                                          left: rect.left + rect.width + 5,
-                                        });
+                                        const distanceToRight = window.innerWidth - rect.right;
+                                    
+                                        if (distanceToRight < 200) {
+                                          setOutOfViewPosition({
+                                            top: rect.top + window.scrollY - rect.height / 2,
+                                            left: rect.left - rect.innerWidth - 5,
+                                            maxWidth: rect.left
+                                          });
+
+                                        } else {
+                                          setOutOfViewPosition({
+                                            top: rect.top + window.scrollY - rect.height / 2,
+                                            left: rect.left + rect.width - 5,
+                                            maxWidth: window.innerWidth - rect.left - rect.width
+                                          });
+                                        }
+                                        setOutOfViewCid(reply.cid);
                                       });
-                                    }}                                
+                                    }}
                                     onMouseLeave={() => {
                                       removeHighlight();
                                       setOutOfViewCid(null);
@@ -1228,10 +1242,22 @@ const Board = () => {
                                       handleQuoteHover(reply, null, () => {
                                         setOutOfViewCid(reply.cid);
                                         const rect = backlinkRefs.current[reply.cid].getBoundingClientRect();
-                                        setOutOfViewPosition({
-                                          top: rect.top + window.scrollY - rect.height / 2,
-                                          left: rect.left + rect.width + 5,
-                                        });
+                                        const distanceToRight = window.innerWidth - rect.right;
+                                    
+                                        if (distanceToRight < 200) {
+                                          setOutOfViewPosition({
+                                            top: rect.top + window.scrollY - rect.height / 2,
+                                            left: rect.left - rect.innerWidth - 5,
+                                            maxWidth: rect.left
+                                          });
+
+                                        } else {
+                                          setOutOfViewPosition({
+                                            top: rect.top + window.scrollY - rect.height / 2,
+                                            left: rect.left + rect.width - 5,
+                                            maxWidth: window.innerWidth - rect.left - rect.width
+                                          });
+                                        }
                                       });
                                     }}
                                     onMouseLeave={() => {
@@ -1315,12 +1341,23 @@ const Board = () => {
                                           return;
                                         } else {
                                           setOutOfViewCid(reply.parentCid);
-                                          console.log("risposta: ", reply.parentCid);
                                           const rect = quoteRefs.current[shortParentCid].getBoundingClientRect();
+                                          const distanceToRight = window.innerWidth - rect.right;
+                                    
+                                        if (distanceToRight < 200) {
                                           setOutOfViewPosition({
                                             top: rect.top + window.scrollY - rect.height / 2,
-                                            left: rect.left + rect.width + 5,
+                                            left: rect.left - rect.innerWidth - 5,
+                                            maxWidth: rect.left
                                           });
+
+                                        } else {
+                                          setOutOfViewPosition({
+                                            top: rect.top + window.scrollY - rect.height / 2,
+                                            left: rect.left + rect.width - 5,
+                                            maxWidth: window.innerWidth - rect.left - rect.width
+                                          });
+                                        }
                                         }
                                       });
                                     }}                                
@@ -1359,10 +1396,22 @@ const Board = () => {
                                       } else {
                                         setOutOfViewCid(reply.parentCid);
                                         const rect = quoteRefs.current[shortParentCid].getBoundingClientRect();
-                                        setOutOfViewPosition({
-                                          top: rect.top + window.scrollY - rect.height / 2,
-                                          left: rect.left + rect.width + 5,
-                                        });
+                                        const distanceToRight = window.innerWidth - rect.right;
+                                    
+                                        if (distanceToRight < 200) {
+                                          setOutOfViewPosition({
+                                            top: rect.top + window.scrollY - rect.height / 2,
+                                            left: rect.left - rect.innerWidth - 5,
+                                            maxWidth: rect.left
+                                          });
+
+                                        } else {
+                                          setOutOfViewPosition({
+                                            top: rect.top + window.scrollY - rect.height / 2,
+                                            left: rect.left + rect.width - 5,
+                                            maxWidth: window.innerWidth - rect.left - rect.width
+                                          });
+                                        }
                                       }
                                     });
                                   }}                                
@@ -1743,23 +1792,23 @@ const Board = () => {
               ) : (<PostLoader />)
             )}
           </div>
-          {createPortal(
+          {outOfViewCid && outOfViewPosition && createPortal(
             <div
-            ref={postOnHoverRef}
+              ref={postOnHoverRef}
               style={{
-                display: outOfViewCid ? "block" : "none",
+                display: "block",
                 position: "absolute",
                 top: outOfViewPosition.top - postOnHoverHeight / 2 + 10,
-                left: outOfViewPosition.left, 
+                left: outOfViewPosition.left,
+                maxWidth: outOfViewPosition.maxWidth,
               }}
-              >
-                <PostOnHover
-                  cid={outOfViewCid}
-                  feed={feed}
-                />
-              </div>
-            , document.body
-          )}
+            >
+              <PostOnHover
+                cid={outOfViewCid}
+                feed={feed}
+              />
+            </div>
+          , document.body)}
         </BoardForm>
         <Footer selectedStyle={selectedStyle}>
           <Break id="break" selectedStyle={selectedStyle} style={{
diff --git a/src/components/views/Subscriptions.jsx b/src/components/views/Subscriptions.jsx
index 4c813753..89abe401 100755
--- a/src/components/views/Subscriptions.jsx
+++ b/src/components/views/Subscriptions.jsx
@@ -197,8 +197,8 @@ const Subscriptions = () => {
   
   useLayoutEffect(() => {
     if (postOnHoverRef.current) {
-        const rect = postOnHoverRef.current.getBoundingClientRect();
-        setPostOnHoverHeight(rect.height);
+      const rect = postOnHoverRef.current.getBoundingClientRect();
+      setPostOnHoverHeight(rect.height);
     }
   }, [outOfViewCid]);
   
@@ -549,10 +549,22 @@ const Subscriptions = () => {
                                     handleQuoteHover(reply, null, () => {
                                       setOutOfViewCid(reply.cid);
                                       const rect = backlinkRefs.current[reply.cid].getBoundingClientRect();
-                                      setOutOfViewPosition({
-                                        top: rect.top + window.scrollY - rect.height / 2,
-                                        left: rect.left + rect.width + 5,
-                                      });
+                                      const distanceToRight = window.innerWidth - rect.right;
+                                    
+                                        if (distanceToRight < 200) {
+                                          setOutOfViewPosition({
+                                            top: rect.top + window.scrollY - rect.height / 2,
+                                            left: rect.left - rect.innerWidth - 5,
+                                            maxWidth: rect.left
+                                          });
+
+                                        } else {
+                                          setOutOfViewPosition({
+                                            top: rect.top + window.scrollY - rect.height / 2,
+                                            left: rect.left + rect.width - 5,
+                                            maxWidth: window.innerWidth - rect.left - rect.width
+                                          });
+                                        }
                                     });
                                   }}
                                   onMouseLeave={() => {
@@ -754,10 +766,22 @@ const Subscriptions = () => {
                                       handleQuoteHover(reply, null, () => {
                                         setOutOfViewCid(reply.cid);
                                         const rect = backlinkRefs.current[reply.cid].getBoundingClientRect();
-                                        setOutOfViewPosition({
-                                          top: rect.top + window.scrollY - rect.height / 2,
-                                          left: rect.left + rect.width + 5,
-                                        });
+                                        const distanceToRight = window.innerWidth - rect.right;
+                                    
+                                        if (distanceToRight < 200) {
+                                          setOutOfViewPosition({
+                                            top: rect.top + window.scrollY - rect.height / 2,
+                                            left: rect.left - rect.innerWidth - 5,
+                                            maxWidth: rect.left
+                                          });
+
+                                        } else {
+                                          setOutOfViewPosition({
+                                            top: rect.top + window.scrollY - rect.height / 2,
+                                            left: rect.left + rect.width - 5,
+                                            maxWidth: window.innerWidth - rect.left - rect.width
+                                          });
+                                        }
                                       });
                                     }}
                                     onMouseLeave={() => {
@@ -843,10 +867,22 @@ const Subscriptions = () => {
                                           setOutOfViewCid(reply.parentCid);
                                           console.log("risposta: ", reply.parentCid);
                                           const rect = quoteRefs.current[shortParentCid].getBoundingClientRect();
+                                          const distanceToRight = window.innerWidth - rect.right;
+                                    
+                                        if (distanceToRight < 200) {
                                           setOutOfViewPosition({
                                             top: rect.top + window.scrollY - rect.height / 2,
-                                            left: rect.left + rect.width + 5,
+                                            left: rect.left - rect.innerWidth - 5,
+                                            maxWidth: rect.left
                                           });
+
+                                        } else {
+                                          setOutOfViewPosition({
+                                            top: rect.top + window.scrollY - rect.height / 2,
+                                            left: rect.left + rect.width - 5,
+                                            maxWidth: window.innerWidth - rect.left - rect.width
+                                          });
+                                        }
                                         }
                                       });
                                     }}                                
@@ -878,10 +914,22 @@ const Subscriptions = () => {
                                       } else {
                                         setOutOfViewCid(reply.parentCid);
                                         const rect = quoteRefs.current[shortParentCid].getBoundingClientRect();
-                                        setOutOfViewPosition({
-                                          top: rect.top + window.scrollY - rect.height / 2,
-                                          left: rect.left + rect.width + 5,
-                                        });
+                                        const distanceToRight = window.innerWidth - rect.right;
+                                    
+                                        if (distanceToRight < 200) {
+                                          setOutOfViewPosition({
+                                            top: rect.top + window.scrollY - rect.height / 2,
+                                            left: rect.left - rect.innerWidth - 5,
+                                            maxWidth: rect.left
+                                          });
+
+                                        } else {
+                                          setOutOfViewPosition({
+                                            top: rect.top + window.scrollY - rect.height / 2,
+                                            left: rect.left + rect.width - 5,
+                                            maxWidth: window.innerWidth - rect.left - rect.width
+                                          });
+                                        }
                                       }
                                     });
                                   }}                                
@@ -1252,23 +1300,23 @@ const Subscriptions = () => {
               />
             )}
           </div>
-          {createPortal(
+          {outOfViewCid && outOfViewPosition && createPortal(
             <div
-            ref={postOnHoverRef}
+              ref={postOnHoverRef}
               style={{
-                display: outOfViewCid ? "block" : "none",
+                display: "block",
                 position: "absolute",
                 top: outOfViewPosition.top - postOnHoverHeight / 2 + 10,
-                left: outOfViewPosition.left, 
+                left: outOfViewPosition.left,
+                maxWidth: outOfViewPosition.maxWidth,
               }}
-              >
-                <PostOnHover
-                  cid={outOfViewCid}
-                  feed={feed}
-                />
-              </div>
-            , document.body
-          )}
+            >
+              <PostOnHover
+                cid={outOfViewCid}
+                feed={feed}
+              />
+            </div>
+          , document.body)}
         </BoardForm>
         <Footer selectedStyle={selectedStyle}>
           <Break id="break" selectedStyle={selectedStyle} style={{
diff --git a/src/components/views/Thread.jsx b/src/components/views/Thread.jsx
index 7492adcb..c355050f 100755
--- a/src/components/views/Thread.jsx
+++ b/src/components/views/Thread.jsx
@@ -482,8 +482,8 @@ const Thread = () => {
 
   useLayoutEffect(() => {
     if (postOnHoverRef.current) {
-        const rect = postOnHoverRef.current.getBoundingClientRect();
-        setPostOnHoverHeight(rect.height);
+      const rect = postOnHoverRef.current.getBoundingClientRect();
+      setPostOnHoverHeight(rect.height);
     }
   }, [outOfViewCid]);
 
@@ -949,10 +949,21 @@ const Thread = () => {
                                 handleQuoteHover(reply, null, () => {
                                   setOutOfViewCid(reply.cid);
                                   const rect = backlinkRefs.current[reply.cid].getBoundingClientRect();
-                                  setOutOfViewPosition({
-                                    top: rect.top + window.scrollY - rect.height / 2,
-                                    left: rect.left + rect.width + 5,
-                                  });
+                                  const distanceToRight = window.innerWidth - rect.right;                                    
+                                  if (distanceToRight < 200) {
+                                    setOutOfViewPosition({
+                                      top: rect.top + window.scrollY - rect.height / 2,
+                                      left: rect.left - rect.innerWidth - 5,
+                                      maxWidth: rect.left
+                                    });
+
+                                  } else {
+                                    setOutOfViewPosition({
+                                      top: rect.top + window.scrollY - rect.height / 2,
+                                      left: rect.left + rect.width + 5,
+                                      maxWidth: window.innerWidth - rect.left - rect.width
+                                    });
+                                  }
                                 });
                               }}
                               onMouseLeave={() => {
@@ -1150,10 +1161,21 @@ const Thread = () => {
                                     handleQuoteHover(reply, null, () => {
                                       setOutOfViewCid(reply.cid);
                                       const rect = backlinkRefs.current[reply.cid].getBoundingClientRect();
-                                      setOutOfViewPosition({
-                                        top: rect.top + window.scrollY - rect.height / 2,
-                                        left: rect.left + rect.width + 5,
-                                      });
+                                      const distanceToRight = window.innerWidth - rect.right;                                    
+                                      if (distanceToRight < 200) {
+                                        setOutOfViewPosition({
+                                          top: rect.top + window.scrollY - rect.height / 2,
+                                          left: rect.left - rect.innerWidth - 5,
+                                          maxWidth: rect.left
+                                        });
+
+                                      } else {
+                                        setOutOfViewPosition({
+                                          top: rect.top + window.scrollY - rect.height / 2,
+                                          left: rect.left + rect.width + 5,
+                                          maxWidth: window.innerWidth - rect.left - rect.width
+                                        });
+                                      }
                                     });
                                   }}
                                   onMouseLeave={() => {
@@ -1233,10 +1255,21 @@ const Thread = () => {
                                   } else {
                                     setOutOfViewCid(reply.parentCid);
                                     const rect = quoteRefs.current[shortParentCid].getBoundingClientRect();
-                                    setOutOfViewPosition({
-                                      top: rect.top + window.scrollY - rect.height / 2,
-                                      left: rect.left + rect.width + 5,
-                                    });
+                                    const distanceToRight = window.innerWidth - rect.right;                                    
+                                    if (distanceToRight < 200) {
+                                      setOutOfViewPosition({
+                                        top: rect.top + window.scrollY - rect.height / 2,
+                                        left: rect.left - rect.innerWidth - 5,
+                                        maxWidth: rect.left
+                                      });
+
+                                    } else {
+                                      setOutOfViewPosition({
+                                        top: rect.top + window.scrollY - rect.height / 2,
+                                        left: rect.left + rect.width + 5,
+                                        maxWidth: window.innerWidth - rect.left - rect.width
+                                      });
+                                    }
                                   }
                                 });
                               }}                                
@@ -1639,23 +1672,23 @@ const Thread = () => {
                 ) : (null)}
             </>
           )) : null}
-          {createPortal(
+          {outOfViewCid && outOfViewPosition && createPortal(
             <div
-            ref={postOnHoverRef}
+              ref={postOnHoverRef}
               style={{
-                display: outOfViewCid ? "block" : "none",
+                display: "block",
                 position: "absolute",
                 top: outOfViewPosition.top - postOnHoverHeight / 2 + 10,
-                left: outOfViewPosition.left, 
+                left: outOfViewPosition.left,
+                maxWidth: outOfViewPosition.maxWidth,
               }}
-              >
-                <PostOnHover
-                  cid={outOfViewCid}
-                  feed={comment}
-                />
-              </div>
-            , document.body
-          )}
+            >
+              <PostOnHover
+                cid={outOfViewCid}
+                feed={comment}
+              />
+            </div>
+          , document.body)}
         </BoardForm>
         <Footer selectedStyle={selectedStyle}>
           <Break id="break" selectedStyle={selectedStyle} style={{