this repo has no description
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

Make settings page work for very small viewports or super large text sizes

+32 -3
+31 -3
src/pages/settings.css
··· 66 66 67 67 #settings-container section select { 68 68 padding: 4px; 69 + width: 100%; 69 70 } 70 71 71 72 #settings-container .radio-group { 72 73 display: inline-flex; 73 74 align-items: center; 74 - border-radius: 999px; 75 + border-radius: 1.1em; 75 76 border: 1px solid var(--button-bg-color); 76 77 overflow: hidden; 77 78 padding: 1px; 79 + flex-wrap: wrap; 78 80 } 79 81 #settings-container .radio-group input[type='radio'] { 80 82 opacity: 0; ··· 85 87 display: inline-block; 86 88 padding: 6px 12px; 87 89 cursor: pointer; 90 + flex-grow: 1; 91 + text-align: center; 88 92 } 89 93 #settings-container .radio-group label input:checked + span { 90 94 color: var(--link-color); ··· 94 98 color: var(--button-bg-color); 95 99 } 96 100 #settings-container .radio-group label:has(input:checked) { 97 - border-radius: 999px; 101 + border-radius: 1.1em; 98 102 color: var(--button-text-color); 99 103 background-color: var(--button-bg-color); 100 104 } ··· 105 109 #settings-container .range-group { 106 110 display: flex; 107 111 align-items: center; 108 - gap: 8px; 112 + gap: 4px; 113 + 114 + @media (width < 320px) { 115 + display: grid; 116 + gap: 0; 117 + column-gap: 4px; 118 + grid-template-areas: 119 + 'label1 label2' 120 + 'input input'; 121 + grid-template-columns: 1fr 1fr; 122 + grid-template-rows: 1fr 1fr; 123 + 124 + > span:first-child { 125 + text-align: left; 126 + } 127 + 128 + > span:last-child { 129 + text-align: right; 130 + } 131 + } 109 132 } 110 133 #settings-container .range-group input[type='range'] { 111 134 flex-grow: 1; 135 + width: 100%; 136 + 137 + @media (width < 320px) { 138 + grid-area: input; 139 + } 112 140 } 113 141 114 142 #settings-container .checkbox-fields {
+1
src/pages/settings.jsx
··· 429 429 <div 430 430 style={{ 431 431 display: 'flex', 432 + flexWrap: 'wrap', 432 433 gap: 8, 433 434 lineHeight: 1.25, 434 435 alignItems: 'center',