Toggle Orientation now works dynamically (for real this time :( )

Signed-off-by: Dave Richer <dave@imexsystems.ca>

client/src/components/trello-board/styles/Base.js

@@ -24,7 +24,7 @@ const getSectionStyles = (props) => {
   return "";
 };
 
-export const GlobalStyleHorizontal = createGlobalStyle`
+export const GlobalStyleHorizontal = styled.div`
   .comPlainTextContentEditable {
     -webkit-user-modify: read-write-plaintext-only;
     cursor: text;
@@ -49,7 +49,8 @@ export const GlobalStyleHorizontal = createGlobalStyle`
     content: "\\E91F";
   }
 
-  .icon-lg, .icon-sm {
+  .icon-lg,
+  .icon-sm {
     color: #798d99;
   }
 
@@ -60,15 +61,14 @@ export const GlobalStyleHorizontal = createGlobalStyle`
     width: 32px;
   }
 `;
-export const GlobalStyleVertical = createGlobalStyle`
+export const GlobalStyleVertical = styled.div`
   .comPlainTextContentEditable {
     -webkit-user-modify: read-write-plaintext-only;
     cursor: text;
   }
   .smooth-dnd-container.horizontal {
-
   }
-  
+
   .comPlainTextContentEditable--has-placeholder::before {
     content: attr(placeholder);
     opacity: 0.5;
@@ -88,7 +88,8 @@ export const GlobalStyleVertical = createGlobalStyle`
     content: "\\E91F";
   }
 
-  .icon-lg, .icon-sm {
+  .icon-lg,
+  .icon-sm {
     color: #798d99;
   }
 
@@ -100,10 +101,10 @@ export const GlobalStyleVertical = createGlobalStyle`
   }
 
   .smooth-dnd-container {
-   // TODO ? This is the question. We need the same drag-zone we get in horizontal mode
+    // TODO ? This is the question. We need the same drag-zone we get in horizontal mode
     min-height: 50px; // Not needed, just for extra landing space
   }
-  
+
   .react-trello-lane {
     border: 1px solid #ccc;
     border-radius: 5px;