improve breakpoints

src/app/globals.css

@@ -29,6 +29,10 @@ body {
 	padding-right: 2px;
 }
 
+.lockup__link__mobile .lockup__link img.lockup__by {
+	padding-right: 0px;
+}
+
 .lockup__link {
 	color: var(--color-text);
 	position: absolute;
@@ -51,12 +55,10 @@ body {
 	/* width: 100%; */
 }
 
-.fal-logo {
-	/* margin-left: -4px; */
-}
-
 .lockup__link__mobile {
-	bottom: 60px;
+	height: 25px;
+	gap: 4px;
+	/* right: 0px; */
 }
 
 .tlui-help-menu {
@@ -68,10 +70,22 @@ body {
 	width: 120px;
 }
 
+.lockup__link__mobile .lockup {
+	width: 60px;
+}
+
 .tlui-debug-panel {
 	display: none !important;
 }
 
+.lockup__link__mobile .lockup__collab {
+	font-size: 16px;
+}
+
+.lockup__link__mobile__raise {
+	bottom: 60px;
+}
+
 .lockup__collab {
 	font-size: 20px;
 	font-weight: 200;

src/components/LockupLink.tsx

@@ -10,7 +10,11 @@ export function LockupLink() {
 	// if (isFocusMode) return null
 
 	return (
-		<span className={`lockup__link ${breakpoint < 7 ? 'lockup__link__mobile' : ''}`}>
+		<span
+			className={`lockup__link ${breakpoint < 7 ? 'lockup__link__mobile' : ''} ${
+				breakpoint < 6 ? 'lockup__link__mobile__raise' : ''
+			}`}
+		>
 			<By />
 			{/* <img alt="by" className="lockup__by" src="/by-tldraw.svg" /> */}
 			<a href="https://twitter.com/tldraw">