jyapayne/kaboot
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Make mobile smaller

Browse source
This commit is contained in:
Joey Yakimowich-Payne 2026-01-19 15:18:42 -07:00
commit cc30b13383
No known key found for this signature in database
GPG key ID: DDF6AF5B21B407D4
2 changed files with 19 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

16
components/QuestionCard.tsx
View file

@ -58,7 +58,7 @@ export const QuestionCard: React.FC<QuestionCardProps> = ({
}`}
>
<div
className="flex items-center gap-3 p-4 cursor-pointer"
className="flex items-center gap-2 md:gap-3 p-2 md:p-4 cursor-pointer"
onClick={onToggleExpand}
>
<div
@ -68,7 +68,7 @@ export const QuestionCard: React.FC<QuestionCardProps> = ({
<GripVertical size={20} />
</div>
<div className="flex-shrink-0 w-8 h-8 bg-theme-primary text-white rounded-lg flex items-center justify-center font-black text-sm">
<div className="flex-shrink-0 w-6 h-6 md:w-8 md:h-8 bg-theme-primary text-white rounded-lg flex items-center justify-center font-black text-xs md:text-sm">
{index + 1}
</div>
@ -77,7 +77,7 @@ export const QuestionCard: React.FC<QuestionCardProps> = ({
</div>
{correctOption && (
<div className={`flex-shrink-0 px-3 py-1 rounded-full text-white text-xs font-bold flex items-center gap-1.5 ${colorMap[correctOption.color]}`}>
<div className={`flex-shrink-0 px-2 md:px-3 py-1 rounded-full text-white text-xs font-bold flex items-center gap-1 md:gap-1.5 ${colorMap[correctOption.color]}`}>
<ShapeIcon shape={correctOption.shape} className="fill-current" />
<span className="hidden sm:inline max-w-[100px] truncate">{correctOption.text}</span>
</div>
@ -111,21 +111,21 @@ export const QuestionCard: React.FC<QuestionCardProps> = ({
transition={{ duration: 0.2 }}
className="overflow-hidden"
>
<div className="px-4 pb-4 pt-0 border-t-2 border-gray-50">
<p className="text-gray-700 font-medium py-3">{question.text}</p>
<div className="px-2 md:px-4 pb-2 md:pb-4 pt-0 border-t-2 border-gray-50">
<p className="text-gray-700 font-medium py-2 md:py-3 text-sm md:text-base">{question.text}</p>
<div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
{question.options.map((option, idx) => (
<div
key={idx}
className={`p-3 rounded-xl border-2 ${
className={`p-2 md:p-3 rounded-xl border-2 ${
option.isCorrect
? 'border-green-500 bg-green-50'
: 'border-gray-200 bg-gray-50'
}`}
>
<div className="flex items-center gap-2">
<div className={`w-6 h-6 rounded flex items-center justify-center ${colorMap[option.color]}`}>
<div className={`w-5 h-5 md:w-6 md:h-6 rounded flex items-center justify-center ${colorMap[option.color]}`}>
<ShapeIcon shape={option.shape} className="text-white fill-white" />
</div>
<span className={`font-bold flex-1 ${option.isCorrect ? 'text-green-700' : 'text-gray-700'}`}>
@ -138,7 +138,7 @@ export const QuestionCard: React.FC<QuestionCardProps> = ({
)}
</div>
{option.reason && (
<p className="text-xs text-gray-500 mt-2 pl-8">{option.reason}</p>
<p className="text-xs text-gray-500 mt-1 md:mt-2 pl-8">{option.reason}</p>
)}
</div>
))}