update

smartcontractkit · Dec 9, 2024 · ccd5322 · ccd5322
1 parent 35a391b
commit ccd5322
Show file tree

Hide file tree

Showing 5 changed files with 326 additions and 140 deletions.
diff --git a/src/components/CCIP/TutorialBlockchainSelector/ChainUpdateBuilder.module.css b/src/components/CCIP/TutorialBlockchainSelector/ChainUpdateBuilder.module.css
@@ -1,73 +1,77 @@
+/* Base Container */
 .builder {
-  margin-top: var(--space-3x);
-  padding: var(--space-4x);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3x);
   background: var(--color-background);
   border: 1px solid var(--color-border);
   border-radius: var(--border-radius);
+  width: 100%;
+  padding: var(--space-3x);
 }
 
 .configSection {
   display: flex;
   flex-direction: column;
-  gap: var(--space-4x);
+  gap: var(--space-3x);
+  width: 100%;
 }
 
-/* Remote Configuration */
-.remoteConfig {
-  padding: var(--space-3x);
-  background: var(--color-background-secondary);
+/* Container Styles - Use CSS Grid for better responsiveness */
+.remoteConfig,
+.rateLimits {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3x);
   border: 1px solid var(--color-border);
   border-radius: var(--border-radius);
+  background: var(--color-background-secondary);
 }
 
+/* Grid Layouts - More flexible approach */
 .field {
-  display: flex;
+  display: grid;
+  grid-template-columns: minmax(140px, auto) minmax(0, 1fr);
   align-items: center;
   gap: var(--space-3x);
-  margin-bottom: var(--space-2x);
-}
-
-.field:last-child {
-  margin-bottom: 0;
-}
-
-.field label {
-  color: var(--color-text-secondary);
-  min-width: 120px;
+  min-width: 0;
+  width: 100%;
 }
 
-.field code {
-  font-family: var(--font-mono);
-  font-size: var(--font-size-sm);
-  color: var(--color-text-primary);
+/* Input Elements */
+.input input,
+.rateLimiter {
   background: var(--color-background);
-  padding: var(--space-1x) var(--space-2x);
-  border-radius: var(--border-radius-sm);
-}
-
-/* Rate Limits */
-.rateLimits {
-  padding: var(--space-3x);
-  background: var(--color-background-secondary);
+  padding: var(--space-2x) var(--space-3x);
   border: 1px solid var(--color-border);
   border-radius: var(--border-radius);
 }
 
-.configTitle {
+.input input {
+  font-family: var(--font-mono);
   font-size: var(--font-size-base);
-  font-weight: 600;
-  color: var(--color-text-primary);
-  margin-bottom: var(--space-3x);
+  display: block;
+  width: 100%;
 }
 
+/* Section Spacing */
+.rateLimits,
+.parameterDetails,
+.copyBlock {
+  margin-top: 0;
+}
+
+/* Rate Limiter Layout - More adaptive */
 .rateLimiterGroup {
   display: grid;
-  grid-template-columns: 1fr 1fr;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
   gap: var(--space-3x);
 }
 
 .rateLimiter {
-  padding: var(--space-3x);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3x);
   background: var(--color-background);
   border: 1px solid var(--color-border);
   border-radius: var(--border-radius);
@@ -77,56 +81,108 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: var(--space-3x);
+  gap: var(--space-2x);
 }
 
-.rateLimiterHeader h5 {
+.rateLimiterHeader h5,
+.rateLimiterHeader span {
   font-size: var(--font-size-base);
-  font-weight: 600;
-  color: var(--color-text-primary);
+  font-weight: normal;
+  color: var(--color-text);
   margin: 0;
+  white-space: nowrap;
 }
 
-.toggle {
+.rateLimiterInputs {
   display: flex;
+  flex-direction: column;
+  gap: var(--space-3x);
+}
+
+/* Interactive Elements */
+.toggle {
+  display: inline-flex;
   align-items: center;
   gap: var(--space-2x);
-  cursor: pointer;
+  white-space: nowrap;
 }
 
-.rateLimiterInputs {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-3x);
+/* Parameter Description */
+.parameterDetails {
+  border-left: 3px solid var(--color-accent);
+  padding-left: var(--space-3x);
+  margin: var(--space-2x) 0;
+  color: var(--color-text-secondary);
 }
 
-.input {
+/* Notice - Use semantic colors */
+.notice {
   display: flex;
-  flex-direction: column;
-  gap: var(--space-1x);
+  align-items: center;
+  gap: var(--space-2x);
+  background: var(--color-warning-background);
+  border: 1px solid var(--color-warning-border);
+  border-radius: var(--border-radius);
+  color: var(--color-warning);
 }
 
-.input label {
-  font-size: var(--font-size-sm);
-  color: var(--color-text-secondary);
+/* Responsive Design */
+@media (max-width: 768px) {
+  .field {
+    grid-template-columns: 1fr;
+  }
+
+  .rateLimiterHeader {
+    flex-direction: column;
+    align-items: flex-start;
+  }
 }
 
-.input input {
-  padding: var(--space-2x);
+/* Keep consistent with SetPoolStep.module.css */
+.functionCall {
+  background: var(--color-background-secondary);
   border: 1px solid var(--color-border);
-  border-radius: var(--border-radius-sm);
-  font-family: var(--font-mono);
-  font-size: var(--font-size-sm);
+  border-radius: var(--border-radius);
+  padding: var(--space-4x);
+  margin: var(--space-2x) 0;
 }
 
-.notice {
-  margin-top: var(--space-3x);
+/* Use the same copyBlock style as SetPoolStep */
+.copyBlock {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3x);
   padding: var(--space-3x);
-  background: var(--color-warning-background);
-  border: 1px solid var(--color-warning-border);
+  background: var(--color-background-secondary);
+  border: 1px solid var(--color-border);
   border-radius: var(--border-radius);
-  color: var(--color-warning);
+  margin-top: var(--space-3x);
+}
+
+.copyInstructions {
+  white-space: nowrap;
+  color: var(--color-text-secondary);
   font-size: var(--font-size-sm);
 }
 
-/* ... more styles matching tutorial theme ... */
+/* Container Styles */
+.remoteConfig {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3x);
+  border: 1px solid var(--color-border);
+  border-radius: var(--border-radius);
+  background: var(--color-background-secondary);
+  padding: var(--space-3x);
+  width: 100%;
+  max-width: none;
+}
+
+/* Ensure code blocks don't overflow */
+.field code {
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+  word-break: break-word;
+  min-width: 0;
+  max-width: 100%;
+}
diff --git a/src/components/CCIP/TutorialBlockchainSelector/ChainUpdateBuilder.tsx b/src/components/CCIP/TutorialBlockchainSelector/ChainUpdateBuilder.tsx
@@ -175,7 +175,7 @@ export const ChainUpdateBuilder = ({ chain, readOnly, defaultConfig, onCalculate
         <div className={styles.configSection}>
           {/* Remote Configuration Section */}
           <div className={styles.remoteConfig}>
-            <h4 className={styles.configTitle}>Remote Configuration</h4>
+            <span className={styles.sectionLabel}>Remote Configuration</span>
             <div className={styles.field}>
               <label>Chain Selector:</label>
               <code>{readOnly.chainSelector}</code>
@@ -192,13 +192,13 @@ export const ChainUpdateBuilder = ({ chain, readOnly, defaultConfig, onCalculate
 
           {/* Rate Limits Section */}
           <div className={styles.rateLimits}>
-            <h4 className={styles.configTitle}>Rate Limit Configuration</h4>
+            <span className={styles.sectionLabel}>Rate Limit Configuration</span>
 
             <div className={styles.rateLimiterGroup}>
               {/* Outbound Configuration */}
               <div className={styles.rateLimiter}>
                 <div className={styles.rateLimiterHeader}>
-                  <h5>Outbound Transfers</h5>
+                  <span>Outbound Transfers</span>
                   <label className={styles.toggle}>
                     <input
                       type="checkbox"
@@ -238,7 +238,7 @@ export const ChainUpdateBuilder = ({ chain, readOnly, defaultConfig, onCalculate
               {/* Inbound Configuration */}
               <div className={styles.rateLimiter}>
                 <div className={styles.rateLimiterHeader}>
-                  <h5>Inbound Transfers</h5>
+                  <span className={styles.sectionLabel}>Inbound Transfers</span>
                   <label className={styles.toggle}>
                     <input
                       type="checkbox"