fix(frontend/controller): add spacing to info panel

fixes #493
shabados · May 8, 2020 · cb51a1f · cb51a1f
1 parent 5e3eb3d
commit cb51a1f
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 10 deletions.
diff --git a/app/frontend/src/Controller/ShabadInfo.css b/app/frontend/src/Controller/ShabadInfo.css
@@ -4,6 +4,11 @@
     color: var(--controller-text-color);
     background-color: var(--controller-background-color);
 }
+
+.popver-buttons {
+    margin-top: 10px;
+}
+
 .db-viewer-button{
     padding-right: 10px;
 }
diff --git a/app/frontend/src/Controller/ShabadInfo.js b/app/frontend/src/Controller/ShabadInfo.js
@@ -77,23 +77,27 @@ const ShabadInfo = () => {
           <span className="writer-name">{writerName}</span>
           <br />
 
-          <Tooltip title="Report a mistake">
-            <Button
-              className="db-viewer-button"
-              size="small"
-              onClick={() => controller.openExternalUrl( getDbViewerUrl( lineId ) )}
-            >
+          <div className="popver-buttons">
+
+            <Tooltip title="Report a mistake">
+              <Button
+                className="db-viewer-button"
+                size="small"
+                onClick={() => controller.openExternalUrl( getDbViewerUrl( lineId ) )}
+              >
               Open in DB Viewer
-            </Button>
-          </Tooltip>
+              </Button>
+            </Tooltip>
 
-          {shabad && (
+            {shabad && (
             <Tooltip title="Click to copy this shabad">
               <Button className="copy-shabad-button" size="small" onClick={onCopyClick}>
                   Copy Shabad
               </Button>
             </Tooltip>
-          )}
+            )}
+
+          </div>
 
         </Typography>
       </Popover>