Tighten question and answer spacing

README.md

@@ -22,6 +22,6 @@ Szkielet komponentu Joomla 6 do gromadzenia pytań testowych.
 
 ## Instalacja
 
-W Joomla wybierz **System → Install → Install from Folder** i wskaż ten katalog. Manifestem instalacyjnym jest `com_testquestions.xml` (wersja 1.8.0).
+W Joomla wybierz **System → Install → Install from Folder** i wskaż ten katalog. Manifestem instalacyjnym jest `com_testquestions.xml` (wersja 1.8.3).
 
 Po instalacji komponent jest dostępny w panelu administratora jako **Pytania testowe**.

administrator/components/com_testquestions/sql/updates/mysql/1.8.1.sql

@@ -0,0 +1 @@
+-- No database changes required for version 1.8.1.

administrator/components/com_testquestions/sql/updates/mysql/1.8.2.sql

@@ -0,0 +1 @@
+-- No database changes required for version 1.8.2.

administrator/components/com_testquestions/sql/updates/mysql/1.8.3.sql

@@ -0,0 +1 @@
+-- No database changes required for version 1.8.3.

com_testquestions.xml

@@ -4,7 +4,7 @@
     <creationDate>2026-10-14</creationDate>
     <author>Komponent</author>
     <license>GNU General Public License version 2 or later</license>
-    <version>1.8.0</version>
+    <version>1.8.3</version>
     <description>COM_TESTQUESTIONS_DESCRIPTION</description>
     <element>com_testquestions</element>
     <namespace path="src">Komponent\Component\Testquestions</namespace>

components/com_testquestions/media/egzamin.css

@@ -1,3 +1,16 @@
+.com-testquestions {
+    width: 100%;
+    max-width: 100%;
+    box-sizing: border-box;
+}
+
+.com-testquestions .testquestion {
+    display: block;
+    width: 100%;
+    max-width: 100%;
+    box-sizing: border-box;
+}
+
 .com-testquestions .timer-container {
     position: relative;
     width: 120px;
@@ -41,7 +54,8 @@
     margin: 25px 5px 11px;
     border: 1px #dfe3e7 solid;
     border-radius: .25rem;
-    width: 98%;
+    width: 100%;
+    box-sizing: border-box;
     padding: 10px;
     text-align: left;
     color: white;
@@ -54,6 +68,31 @@
     font-size: inherit;
 }
 
+.com-testquestions .question-header {
+    display: flex;
+    align-items: flex-start;
+    gap: .25rem;
+}
+
+.com-testquestions .question-number {
+    flex: 0 0 auto;
+    white-space: nowrap;
+    font-weight: 700;
+}
+
+.com-testquestions .question-text {
+    flex: 1 1 auto;
+    min-width: 0;
+}
+
+.com-testquestions .question-text > :first-child {
+    margin-top: 0;
+}
+
+.com-testquestions .question-text > :last-child {
+    margin-bottom: 0;
+}
+
 .com-testquestions .odp,
 .com-testquestions .odpp,
 .com-testquestions .odpu,
@@ -62,7 +101,8 @@
     margin: 5px;
     border: 1px #dfe3e7 solid;
     border-radius: .25rem;
-    width: 98%;
+    width: 100%;
+    box-sizing: border-box;
     padding: 10px;
     text-align: left;
     box-shadow: 2px 2px 2px rgba(0, 0, 0, .2);
@@ -105,10 +145,22 @@
 }
 
 .com-testquestions .answer-list label {
-    display: block;
+    display: flex;
+    align-items: flex-start;
+    gap: .25rem;
     cursor: pointer;
 }
 
+.com-testquestions .answer-list label input {
+    flex: 0 0 auto;
+    margin-top: .25rem;
+}
+
+.com-testquestions .answer-text {
+    flex: 1 1 auto;
+    min-width: 0;
+}
+
 .com-testquestions select.egzamin {
     color: #4a86cf;
     padding: 5px;

components/com_testquestions/tmpl/questions/default.php

@@ -36,7 +36,12 @@ use Joomla\CMS\HTML\HTMLHelper;
     <form action="<?php echo htmlspecialchars($_SERVER['REQUEST_URI'], ENT_QUOTES, 'UTF-8'); ?>" method="post">
     <?php foreach ($this->items as $number => $item) : ?>
         <article class="testquestion mb-4">
-            <div class="pyt"><h2><?php echo ($number + 1) . '. '; ?><?php echo $item->question; ?></h2></div>
+            <div class="pyt">
+                <div class="question-header">
+                    <span class="question-number"><?php echo ($number + 1) . '.'; ?></span>
+                    <div class="question-text"><?php echo $item->question; ?></div>
+                </div>
+            </div>
             <?php if ($item->image) : ?>
                 <div class="foto_pyt"><img src="<?php echo htmlspecialchars($item->image, ENT_QUOTES, 'UTF-8'); ?>" alt="" loading="lazy"></div>
             <?php endif; ?>
@@ -53,7 +58,8 @@ use Joomla\CMS\HTML\HTMLHelper;
                     <li class="<?php echo $isSelected && $this->results['items'][$item->id]['correct'] ? 'odpup' : ($isSelected ? 'odpu' : ($isCorrectAnswer ? 'odpp' : 'odp')); ?>">
                         <label>
                             <input type="radio" name="answers[<?php echo (int) $item->id; ?>]" value="<?php echo $answerIndex + 1; ?>" <?php echo $isSelected ? 'checked' : ''; ?>>
-                            <strong><?php echo chr(65 + $answerIndex); ?>.</strong> <?php echo $item->$answerField; ?>
+                            <strong><?php echo chr(65 + $answerIndex); ?>.</strong>
+                            <span class="answer-text"><?php echo $item->$answerField; ?></span>
                             <?php if ($isSelected) : ?>
                                 <span class="badge bg-info"><?php echo \Joomla\CMS\Language\Text::_('COM_TESTQUESTIONS_SELECTED_ANSWER'); ?></span>
                             <?php endif; ?>

egzamin.css

@@ -127,3 +127,51 @@ div.odpup
 		margin-right:10px;
 	    
 	}
+.com-testquestions {
+    width: 100%;
+    max-width: 100%;
+    box-sizing: border-box;
+}
+
+.com-testquestions .testquestion {
+    display: block;
+    width: 100%;
+    max-width: 100%;
+    box-sizing: border-box;
+}
+
+.com-testquestions .pyt,
+.com-testquestions .odp,
+.com-testquestions .odpp,
+.com-testquestions .odpu,
+.com-testquestions .odpup {
+    box-sizing: border-box;
+}
+
+.com-testquestions .question-header {
+    display: flex;
+    align-items: flex-start;
+    gap: .25rem;
+}
+
+.com-testquestions .question-number {
+    flex: 0 0 auto;
+    white-space: nowrap;
+    font-weight: 700;
+}
+
+.com-testquestions .question-text {
+    flex: 1 1 auto;
+    min-width: 0;
+}
+
+.com-testquestions .answer-list label {
+    display: flex;
+    align-items: flex-start;
+    gap: .25rem;
+}
+
+.com-testquestions .answer-text {
+    flex: 1 1 auto;
+    min-width: 0;
+}