fix: renderFooter styling (#5962)

src/components/LayerUI.scss

@@ -85,6 +85,10 @@
       & > * {
         pointer-events: all;
       }
+
+      display: flex;
+      width: 100%;
+      justify-content: flex-start;
     }
     .layer-ui__wrapper__footer-left,
     .layer-ui__wrapper__footer-right,

src/excalidraw-app/index.scss

@@ -4,9 +4,8 @@
   &.theme--dark {
     --color-primary-contrast-offset: #726dff; // to offset Chubb illusion
   }
-  .layer-ui__wrapper__footer-center {
-    display: flex;
-    justify-content: space-between;
+  .layer-ui__wrapper .layer-ui__wrapper__footer-center {
+    justify-content: flex-end;
     margin-top: auto;
     margin-bottom: auto;
     margin-inline-start: auto;

src/packages/excalidraw/example/App.scss

@@ -66,10 +66,16 @@
   button.custom-element {
     width: 2rem;
     height: 2rem;
-    margin: 0.4rem;
-    margin-left: -10px;
+    margin: 0 8px;
   }
-  .layer-ui__wrapper__footer-center {
-    display: flex;
+
+  .custom-footer,
+  .custom-element {
+    padding: 0.1rem;
+  }
+
+  &.excalidraw-container .layer-ui__wrapper .layer-ui__wrapper__footer-center {
+    // Remove once we stop importing langauge list from excalidraw app
+    justify-content: flex-start;
   }
 }

src/packages/excalidraw/example/App.tsx

@@ -192,7 +192,10 @@ export default function App() {
         >
           {COMMENT_SVG}
         </button>
-        <button onClick={() => alert("This is dummy footer")}>
+        <button
+          className="custom-footer"
+          onClick={() => alert("This is dummy footer")}
+        >
           {" "}
           custom footer{" "}
         </button>