CredenceOrg · iyanumajekodunmi756 · Jun 30, 2026
diff --git a/src/components/AddressInput.css b/src/components/AddressInput.css
@@ -341,3 +341,24 @@
     font-size: var(--credence-font-size-2xs);
   }
 }
+
+/* Very small screens (360px): ensure input fits without overflow */
+@media (max-width: 360px) {
+  .address-input-container {
+    padding: var(--credence-space-1) var(--credence-space-2);
+  }
+
+  .address-input-field {
+    font-size: var(--credence-font-size-xs);
+  }
+
+  .address-input-paste-button {
+    width: 24px;
+    height: 24px;
+  }
+
+  .address-input-copy-button {
+    width: 24px;
+    height: 24px;
+  }
+}
diff --git a/src/components/AmountInput.css b/src/components/AmountInput.css
@@ -170,3 +170,22 @@
     width: 100%;
   }
 }
+
+/* Very small screens (360px): ensure input fits without overflow */
+@media (max-width: 360px) {
+  .amountInput__input {
+    padding: var(--credence-space-2) var(--credence-space-10) var(--credence-space-2)
+      var(--credence-space-3);
+    font-size: var(--credence-font-size-sm);
+  }
+
+  .amountInput__maxButton {
+    padding: var(--credence-space-1) var(--credence-space-2);
+    font-size: var(--credence-font-size-sm);
+  }
+
+  .amountInput__chip {
+    padding: var(--credence-space-1) var(--credence-space-2);
+    font-size: var(--credence-font-size-sm);
+  }
+}
diff --git a/src/components/Banner.css b/src/components/Banner.css
@@ -150,6 +150,18 @@
   }
 }
 
+/* Very small screens (360px): ensure banner content fits without overflow */
+@media (max-width: 360px) {
+  .banner {
+    padding: var(--credence-space-2) var(--credence-space-3);
+    font-size: var(--credence-font-size-xs);
+  }
+
+  .banner__link {
+    font-size: var(--credence-font-size-xs);
+  }
+}
+
 /* ─── Dismiss button ──────────────────────────────────────────────────────── */
 
 .banner__dismiss {

diff --git a/src/components/Button.css b/src/components/Button.css
@@ -198,9 +198,17 @@
 }
 
 /* Responsive adjustments */
-@media (max-width: 767px) {
+@media (max-width: 768px) {
   .credence-button {
     padding: var(--credence-space-3) var(--credence-space-4);
     font-size: var(--credence-font-size-sm);
   }
 }
+
+/* Very small screens (360px): further reduce button padding */
+@media (max-width: 360px) {
+  .credence-button {
+    padding: var(--credence-space-2) var(--credence-space-3);
+    font-size: var(--credence-font-size-xs);
+  }
+}
diff --git a/src/components/ConfirmDialog.css b/src/components/ConfirmDialog.css
@@ -213,7 +213,7 @@
   }
 }
 
-@media (max-width: 767px) {
+@media (max-width: 768px) {
   .confirm-dialog__backdrop {
     align-items: flex-end;
     padding: 0;
@@ -235,6 +235,30 @@
   }
 }
 
+/* Very small screens (360px): ensure dialog fits without overflow */
+@media (max-width: 360px) {
+  .confirm-dialog__backdrop {
+    padding: var(--credence-space-2);
+  }
+
+  .confirm-dialog {
+    max-height: 95vh;
+    border-radius: var(--credence-radius-lg) var(--credence-radius-lg) 0 0;
+  }
+
+  .confirm-dialog__header {
+    padding: var(--credence-space-4) var(--credence-space-4) var(--credence-space-3);
+  }
+
+  .confirm-dialog__body {
+    padding: var(--credence-space-4);
+  }
+
+  .confirm-dialog__footer {
+    padding: var(--credence-space-3) var(--credence-space-4) var(--credence-space-4);
+  }
+}
+
 @media (min-width: 1280px) {
   .confirm-dialog {
     max-width: 32rem;

diff --git a/src/components/CreateBondFlow.css b/src/components/CreateBondFlow.css
@@ -1,7 +1,3 @@
-:root {
-  /* no-op: tokens come from src/index.css */
-}
-
 .createBondFlow {
   display: grid;
   gap: var(--credence-space-6);
@@ -58,6 +54,22 @@
   }
 }
 
+/* Very small screens (360px): ensure flow content fits without overflow */
+@media (max-width: 360px) {
+  .createBondFlow__durationButton {
+    padding: var(--credence-space-3);
+    font-size: var(--credence-font-size-sm);
+  }
+
+  .createBondFlow__reviewCard {
+    padding: var(--credence-space-3);
+  }
+
+  .createBondFlow__nav {
+    gap: var(--credence-space-2);
+  }
+}
+
 /* Duration button: defaults to secondary/unselected state */
 .createBondFlow__durationButton {
   flex: 1;
@@ -93,7 +105,6 @@
 .createBondFlow__error {
   color: var(--credence-color-danger);
   font-weight: var(--credence-font-weight-semibold);
-  role: alert;
 }
 
 /* ─────────────────────────────────────────────────────────────

diff --git a/src/components/Layout.css b/src/components/Layout.css
@@ -176,7 +176,7 @@
 }
 
 /* Mobile: hide desktop nav, tighten header padding */
-@media (max-width: 639px) {
+@media (max-width: 640px) {
   .appNav {
     display: none;
   }
@@ -185,3 +185,14 @@
     padding: var(--credence-space-3) var(--credence-space-4);
   }
 }
+
+/* Very small screens (360px): further tighten header padding */
+@media (max-width: 360px) {
+  .appHeader {
+    padding: var(--credence-space-2) var(--credence-space-3);
+  }
+
+  .appBrand {
+    font-size: var(--credence-font-size-lg);
+  }
+}
diff --git a/src/components/ToastProvider.tsx b/src/components/ToastProvider.tsx
@@ -11,7 +11,7 @@ const TIMEOUTS: Record<ToastSeverity, number> = {
 };
 
 // Maximum number of toasts displayed simultaneously
-+const MAX_TOASTS = 3;
+const MAX_TOASTS = 3;
 
 
 interface ToastContextValue {

diff --git a/src/config/breakpoints.ts b/src/config/breakpoints.ts
@@ -0,0 +1,36 @@
+/**
+ * Responsive breakpoint constants
+ * Centralized configuration for consistent responsive design across the application
+ */
+
+export const BREAKPOINTS = {
+  // Extra small devices (very small phones)
+  XS: 360,
+  // Small devices (landscape phones, small tablets)
+  SM: 640,
+  // Medium devices (tablets, large phones)
+  MD: 768,
+  // Large devices (desktops)
+  LG: 1024,
+  // Extra large devices (large desktops)
+  XL: 1280,
+} as const;
+
+export type Breakpoint = keyof typeof BREAKPOINTS;
+
+/**
+ * Media query helpers for use in CSS-in-JS or dynamic styles
+ */
+export const mediaQueries = {
+  xs: `@media (max-width: ${BREAKPOINTS.XS - 1}px)`,
+  sm: `@media (max-width: ${BREAKPOINTS.SM - 1}px)`,
+  md: `@media (max-width: ${BREAKPOINTS.MD - 1}px)`,
+  lg: `@media (max-width: ${BREAKPOINTS.LG - 1}px)`,
+  xl: `@media (max-width: ${BREAKPOINTS.XL - 1}px)`,
+
+  // Min-width queries
+  smMin: `@media (min-width: ${BREAKPOINTS.SM}px)`,
+  mdMin: `@media (min-width: ${BREAKPOINTS.MD}px)`,
+  lgMin: `@media (min-width: ${BREAKPOINTS.LG}px)`,
+  xlMin: `@media (min-width: ${BREAKPOINTS.XL}px)`,
+} as const;
diff --git a/src/index.css b/src/index.css
@@ -322,7 +322,8 @@ a:hover {
   color: var(--credence-text-secondary);
 }
 
-@media (max-width: 767px) {
+/* Tablet and smaller (768px): stack footer content vertically */
+@media (max-width: 768px) {
   .footer-content {
     flex-direction: column;
   }

diff --git a/src/pages/Dashboard.css b/src/pages/Dashboard.css
@@ -120,7 +120,7 @@
   border-color: var(--credence-color-primary);
 }
 
-@media (max-width: 767px) {
+@media (max-width: 768px) {
   .dashboard__header {
     display: grid;
   }
@@ -133,3 +133,19 @@
     width: 100%;
   }
 }
+
+/* Very small screens (360px): ensure dashboard content fits without overflow */
+@media (max-width: 360px) {
+  .dashboard__header {
+    gap: var(--credence-space-4);
+  }
+
+  .dashboard__wallet {
+    min-width: auto;
+    padding: var(--credence-space-2) var(--credence-space-3);
+  }
+
+  .dashboard__shortcut {
+    padding: var(--credence-space-2);
+  }
+}
diff --git a/src/pages/Transactions.css b/src/pages/Transactions.css
@@ -95,7 +95,7 @@
   font-size: var(--credence-font-size-sm);
 }
 
-@media (max-width: 639px) {
+@media (max-width: 640px) {
   .transactions__table,
   .transactions__table thead,
   .transactions__table tbody,
@@ -144,3 +144,21 @@
     flex-shrink: 0;
   }
 }
+
+/* Very small screens (360px): ensure table content fits without overflow */
+@media (max-width: 360px) {
+  .transactions__table td::before {
+    min-width: 5rem;
+    font-size: 0.7rem;
+  }
+
+  .transactions__hash {
+    max-width: 10ch;
+    font-size: 0.65rem;
+  }
+
+  .transactions__header {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+}