checpoint fix

src/App.css

@@ -1672,6 +1672,10 @@
   font-size: 0.73rem;
 }
 
+.study-classroom-main {
+  min-width: 0;
+}
+
 .study-classroom-main h1 {
   margin: 0.35rem 0 0;
 }

src/colossiansStudy.tsx

@@ -1751,7 +1751,7 @@ export function ColossiansStudySectionPage({ content }: Props) {
                     )}
                   </div>
                   {section.checkpointPrompt && <p className="study-detail-copy">{section.checkpointPrompt}</p>}
-                  <div style={{ display: 'grid', gap: '1rem' }}>
+                  <div style={{ display: 'grid', gap: '1rem', marginTop: section.checkpointPrompt ? '1rem' : undefined }}>
                     {section.checkpointQuestions!.map((question, index) => (
                       <div key={index}>
                         <p style={{ margin: '0 0 0.5rem', fontWeight: 600 }}>{question}</p>
@@ -1760,7 +1760,7 @@ export function ColossiansStudySectionPage({ content }: Props) {
                           value={checkpointAnswers[index] ?? ''}
                           onChange={e => setCheckpointAnswers(prev => ({ ...prev, [index]: e.target.value }))}
                           placeholder="Write your answer here..."
-                          style={{ width: '100%', padding: '0.85rem 1rem', borderRadius: '12px', border: `1px solid ${(checkpointAnswers[index] ?? '').trim() ? '#2a4a2a' : '#2a2518'}`, background: '#14130f', color: '#f0ead8' }}
+                          style={{ width: '100%', boxSizing: 'border-box', resize: 'vertical', padding: '0.85rem 1rem', borderRadius: '12px', border: `1px solid ${(checkpointAnswers[index] ?? '').trim() ? '#2a4a2a' : '#2a2518'}`, background: '#14130f', color: '#f0ead8' }}
                         />
                       </div>
                     ))}