Added dynamic container to improve settings page rendering when undersized.

src/controllers/api/admin/tokeCommandController.js

@@ -57,7 +57,6 @@ module.exports.post = async function(req, res){
             res.status(400);
             return res.send({errors: validResult.array()})
         }
-        
     }catch(err){
         return exceptionHandler(res, err);
     }
@@ -87,7 +86,6 @@ module.exports.delete = async function(req, res){
             res.status(400);
             return res.send({errors: validResult.array()})
         }
-        
     }catch(err){
         return exceptionHandler(res, err);
     }

src/views/partial/adminPanel/channelList.ejs

@@ -15,6 +15,7 @@ You should have received a copy of the GNU Affero General Public License
 along with this program.  If not, see <https://www.gnu.org/licenses/>.-->
 <div id="admin-channel-list-div" class="admin-list-div">
     <h3>Channel List:</h3>
+    <div class="dynamic-container">
         <table id="admin-channel-list-table" class="admin-list-table">
         <tr id="admin-channel-list-entry-title" class="admin-list-entry-title-row">
                 <td id="admin-channel-list-entry-img-title" class=" admin-list-entry-title admin-list-entry-item admin-list-entry-img-title">
@@ -45,4 +46,5 @@ along with this program.  If not, see <https://www.gnu.org/licenses/>.-->
             </tr>
         <% }); %>
         </table>
+    </div>
 </div>

src/views/partial/adminPanel/permList.ejs

@@ -15,6 +15,7 @@ You should have received a copy of the GNU Affero General Public License
 along with this program.  If not, see <https://www.gnu.org/licenses/>.-->
 <div id="admin-perm-list-div" class="admin-list-div">
     <h3>Permissions:</h3>
+    <div class="dynamic-container">
         <form action="javascript:" id="admin-perm-list-field" class="admin-list-field">
             <% Object.keys(permList).forEach((key)=>{ %>
                 <% if(key != "channelOverrides"){ %>
@@ -42,4 +43,5 @@ along with this program.  If not, see <https://www.gnu.org/licenses/>.-->
                 <% } %>
             <% }); %>
         </form>
+    </div>
 </div>

src/views/partial/adminPanel/tokeCommandList.ejs

@@ -0,0 +1,18 @@
+<!--Canopy - The next generation of stoner streaming software
+Copyright (C) 2024  Rainbownapkin and the TTN Community
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as
+published by the Free Software Foundation, either version 3 of the
+License, or (at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with this program.  If not, see <https://www.gnu.org/licenses/>.-->
+<div id="admin-channel-list-div" class="admin-list-div">
+    <h3>Toke Command List:</h3>
+</div>

src/views/partial/adminPanel/userBanList.ejs

@@ -15,6 +15,7 @@ You should have received a copy of the GNU Affero General Public License
 along with this program.  If not, see <https://www.gnu.org/licenses/>.-->
 <div id="admin-ban-list-div" class="admin-list-div">
     <h3>User Ban List:</h3>
+    <div class="dynamic-container">
         <table id="admin-ban-list-table" class="admin-list-table">
         <tr id="admin-ban-list-entry-title" class="admin-list-entry-title-row">
                 <td id="admin-ban-list-entry-img-title" class="admin-list-entry-title admin-list-entry-item admin-list-entry-img-title">
@@ -43,4 +44,5 @@ along with this program.  If not, see <https://www.gnu.org/licenses/>.-->
                 </td>
             </tr>
         </table>
+    </div>
 </div>

src/views/partial/adminPanel/userList.ejs

@@ -15,6 +15,7 @@ You should have received a copy of the GNU Affero General Public License
 along with this program.  If not, see <https://www.gnu.org/licenses/>.-->
 <div id="admin-user-list-div" class="admin-list-div">
     <h3>User List:</h3>
+    <div class="dynamic-container">
         <table id="admin-user-list-table" class="admin-list-table">
         <tr id="admin-user-list-entry-title" class="admin-list-entry-title-row">
                 <td id="admin-user-list-entry-img-title" class="admin-list-entry-title admin-list-entry-item admin-list-entry-img-title">
@@ -80,4 +81,5 @@ along with this program.  If not, see <https://www.gnu.org/licenses/>.-->
             </tr>
         <% }); %>
         </table>
+    </div>
 </div>

src/views/partial/channelSettings/banList.ejs

@@ -19,6 +19,7 @@ along with this program.  If not, see <https://www.gnu.org/licenses/>.-->
         <input placeholder="Add Username..." id="new-ban-input" class="control-prompt">
         <button id="new-ban-button" class="danger-button">Ban</button>
     </div>
+    <div class="dynamic-container">
         <table id="admin-ban-list-table" class="admin-list-table">
             <tr class="admin-list-entry-title-row">
                 <td class="admin-list-entry-item admin-list-entry-img-title"><h3>Img</h3></td>
@@ -31,4 +32,5 @@ along with this program.  If not, see <https://www.gnu.org/licenses/>.-->
             </tr>
             <!-- This is getting filled via AJAX since we need to refresh it when new users are added anywho. -->
         </table>
+    </div>
 </div>

src/views/partial/channelSettings/permList.ejs

@@ -15,6 +15,7 @@ You should have received a copy of the GNU Affero General Public License
 along with this program.  If not, see <https://www.gnu.org/licenses/>.-->
 <div class="admin-list-div">
     <h3> Permissions:</h3>
+    <div class="dynamic-container">
         <form action="javascript:" class="admin-list-field">
             <% Object.keys(channel.permissions.toObject()).forEach((key)=>{ %>
                 <% if(key != "channelOverrides"){ %>
@@ -29,4 +30,5 @@ along with this program.  If not, see <https://www.gnu.org/licenses/>.-->
                 <% } %>
             <% }); %>
         </form>
+    </div>
 </div>

src/views/partial/channelSettings/settings.ejs

@@ -15,6 +15,7 @@ You should have received a copy of the GNU Affero General Public License
 along with this program.  If not, see <https://www.gnu.org/licenses/>.-->
 <div class="admin-list-div">
     <h3>Channel Preferences:</h3>
+    <div class="dynamic-container">
         <form action="javascript:" class="admin-list-field">
             <% Object.keys(channel.settings).forEach((key) => { %>
                 <span class="admin-list-field-container">
@@ -23,4 +24,5 @@ along with this program.  If not, see <https://www.gnu.org/licenses/>.-->
                 </span>
             <% }); %>
         </form>
+    </div>
 </div>

src/views/partial/channelSettings/userList.ejs

@@ -24,6 +24,7 @@ along with this program.  If not, see <https://www.gnu.org/licenses/>.-->
             <% }); %>
         </select>
     </div>
+    <div class="dynamic-container">
         <table class="admin-list-table">
             <tr class="admin-list-entry-title-row">
                 <td class="admin-list-entry-item admin-list-entry-img-title"><h3>Img</h3></td>
@@ -33,4 +34,5 @@ along with this program.  If not, see <https://www.gnu.org/licenses/>.-->
             </tr>
             <!-- This is getting filled via AJAX since we need to refresh it when new users are added anywho. -->
         </table>
+    </div>
 </div>

www/css/global.css

@@ -30,10 +30,12 @@ body{
 form{
     display: flex;
     flex-direction: column;
+    padding: 1em;
 }
 
 table{
     border-spacing: 0px;
+    width: 100%
 }
 
 td{
@@ -65,6 +67,10 @@ input.control-prompt{
     flex: 1;
 }
 
+div.dynamic-container{
+    overflow: auto;
+}
+
 /* Navbar */
 #navbar{
     display: flex;

www/css/theme/movie-night.css

@@ -137,16 +137,13 @@ button:active{
     background-color: var(--focus0-alt1);
 }
 
-table, form{
+.dynamic-container{
     background-color: var(--bg1);
     color: var(--accent1);
     box-shadow: 3px 3px 1px var(--bg1-alt0) inset;
     border-radius: 1em;
 }
 
-form{
-    padding: 1em;
-}
 
 tr{
     box-shadow: var(--accent1) 0px 1em 1px -2em, var(--accent1) 0px -1em 1px -1em;