From c0c6fd2464a44ac820f4cfadd3265af3c68531f7 Mon Sep 17 00:00:00 2001
From: Quantum <quantum2048@gmail.com>
Date: Sun, 7 Apr 2024 02:04:25 -0400
Subject: [PATCH] Reduce number of codes shown on mobile

---
 src/OTPOutput.tsx |  2 ++
 src/index.scss    | 13 +++++++++++++
 src/main.tsx      |  1 -
 3 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/src/OTPOutput.tsx b/src/OTPOutput.tsx
index 9ed8525..285d597 100644
--- a/src/OTPOutput.tsx
+++ b/src/OTPOutput.tsx
@@ -17,6 +17,8 @@ function OTPCode({code, delta}: { code: string; delta: number }) {
     'totp-newer': delta > 0,
     'totp-current': delta === 0,
     'totp-far': Math.abs(delta) > 5,
+    'totp-near-first': delta === -5,
+    'totp-near-last': delta === 5,
   })}>
     {code}
   </div>;
diff --git a/src/index.scss b/src/index.scss
index 72b04e5..5d24cf0 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -83,3 +83,16 @@ nav {
     font-size: 2em;
   }
 }
+
+@include media-breakpoint-down(sm) {
+  .totp-code {
+    &.totp-far {
+      display: none;
+    }
+
+    &.totp-near-first, &.totp-near-last {
+      max-height: 0;
+      transform: scale(1, 0);
+    }
+  }
+}
diff --git a/src/main.tsx b/src/main.tsx
index 70a4f8a..ffd13ec 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -2,7 +2,6 @@ import React from 'react';
 import ReactDOM from 'react-dom/client';
 import App from './App.tsx';
 import './index.scss';
-import 'bootstrap/js/src/collapse.js';
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>