tweak styles

Author: sw-yx

example/src/App.tsx

@@ -20,13 +20,6 @@ function App() {
               LOG OUT
             </button>
 
-            <h3>
-              Or{" "}
-              <a href="https://github.com/sw-yx/react-netlify-identity-widget" target="_blank">
-                view the source
-              </a>
-            </h3>
-
             <IdentityModal showDialog={dialog} onCloseDialog={() => setDialog(false)} />
           </header>
         ) : (
@@ -38,6 +31,16 @@ function App() {
             <IdentityModal showDialog={dialog} onCloseDialog={() => setDialog(false)} />
           </header>
         )}
+        <h3>
+          Or{" "}
+          <a
+            href="https://github.com/sw-yx/react-netlify-identity-widget"
+            target="_blank"
+            style={{ color: "powderblue" }}
+          >
+            view the source
+          </a>
+        </h3>
       </div>
     </IdentityContextProvider>
   )

styles.css

@@ -16,7 +16,7 @@
 }
 
 [data-reach-dialog-content] {
-  width: 50vw;
+  /* width: 90vw; */ /* disabled for mobile */
   margin: 10vh auto;
   background: white;
   padding: 2rem;
@@ -145,6 +145,9 @@
 }
 
 @media (min-width: 480px) {
+  [data-reach-dialog-content] {
+    width: 50vw;
+  }
   .modalContainer::before {
     background-color: rgb(14, 30, 37);
     -webkit-animation: fadeIn 0.1s ease-in;