]> git.ipfire.org Git - thirdparty/bacula.git/commitdiff
baculum: Enable re-running jobs in async way and visual improvements
authorMarcin Haba <marcin.haba@bacula.pl>
Sat, 13 Jun 2020 07:18:52 +0000 (09:18 +0200)
committerMarcin Haba <marcin.haba@bacula.pl>
Sat, 13 Jun 2020 07:18:52 +0000 (09:18 +0200)
gui/baculum/protected/Web/JavaScript/misc.js
gui/baculum/protected/Web/Layouts/Main.tpl
gui/baculum/protected/Web/Pages/Graphs.page
gui/baculum/protected/Web/Pages/JobHistoryList.page
gui/baculum/protected/Web/Pages/JobHistoryList.php
gui/baculum/protected/Web/Pages/NewResource.page
gui/baculum/protected/Web/Portlets/BaculaConfigDirectives.tpl
gui/baculum/protected/Web/Portlets/MainSideBar.tpl
gui/baculum/themes/Baculum-v2/css/baculum.css

index 6fb1924352918c1b830335eb3b69958aab042f29..7a052591f3582b8f88c7b15004b85a07773d3570 100644 (file)
@@ -678,7 +678,7 @@ var W3SideBar = {
                        Cookies.set_cookie('baculum_side_bar_hide', 0);
                        this.sidebar.style.display = 'block';
                        this.overlay_bg.style.display = 'block';
-                       this.page_main.css({'margin-left': '300px', 'width': 'calc(100% - 300px)'});
+                       this.page_main.css({'margin-left': '250px', 'width': 'calc(100% - 250px)'});
                }
        },
        close: function() {
index 72115998025d072cd16fe93791cb68be34c34692..864e5dade4bbde891a026eba2333c8a887a61a76 100644 (file)
@@ -31,7 +31,7 @@
                        </div>
                        <com:Application.Web.Portlets.MainSideBar />
                        <!-- !PAGE CONTENT! -->
-                       <div class="w3-main page_main_el" id="page_main" style="margin-left:300px; margin-top:43px;">
+                       <div class="w3-main page_main_el" id="page_main" style="margin-left: 250px; margin-top: 43px;">
                                <span class="w3-tag w3-large w3-purple w3-right w3-padding-small w3-margin-top w3-margin-right">
                                        <i class="fa fa-cogs w3-large"></i> <%[ Running jobs: ]%> <span id="running_jobs"></span>
                                </span>
index d61d4692a0b1b1ac0f65a55358d4718a4edbbbb6..9769c9841cc736bbcf0d81a91efe4ed235f04e32 100644 (file)
@@ -1,7 +1,7 @@
 <%@ MasterClass="Application.Web.Layouts.Main" Theme="Baculum-v2"%>
 <com:TContent ID="Main">
        <!-- Header -->
-       <header class="w3-container">
+       <header class="w3-container w3-show-block">
                <h5>
                        <b><i class="fa fa-chart-pie"></i> <%[ Graphs ]%></b>
                </h5>
index 2bd8c99d801522f459dedc08d6c294b5f83b18fa..aa73dae520fe82738c5a4c513c5230de4e3d780d 100644 (file)
                <p class="info w3-hide-medium w3-hide-small"><%[ Tip: Use left-click to select table row. Use CTRL + left-click to multiple row selection. Use SHIFT + left-click to add a range of rows to selection. ]%></p>
        </div>
        <com:Application.Web.Portlets.RunJob ID="RunJobModal" />
-       <com:TCallback ID="RunJobCb" OnCallback="runJobAgain" />
-       <com:TCallback ID="CancelJobCb" OnCallback="cancelJob" />
+       <com:TCallback ID="RunJobCb" OnCallback="runJobAgain">
+               <prop:ClientSide.OnLoading>
+                       show_btn_loader(sender.options.CallbackParameter);
+               </prop:ClientSide.OnLoading>
+               <prop:ClientSide.OnComplete>
+                       hide_btn_loader(sender.options.CallbackParameter);
+                       oMonitor();
+               </prop:ClientSide.OnComplete>
+       </com:TCallback>
+       <com:TCallback ID="CancelJobCb" OnCallback="cancelJob">
+               <prop:ClientSide.OnLoading>
+                       show_btn_loader(sender.options.CallbackParameter);
+               </prop:ClientSide.OnLoading>
+               <prop:ClientSide.OnComplete>
+                       hide_btn_loader(sender.options.CallbackParameter);
+                       oMonitor();
+               </prop:ClientSide.OnComplete>
+       </com:TCallback>
 <script type="text/javascript">
-var run_job_callback = <%=$this->RunJobCb->ActiveControl->Javascript%>;
-var cancel_job_callback = <%=$this->CancelJobCb->ActiveControl->Javascript%>;
-function refresh_job_history(jobid) {
-       document.location.href = '<%=$this->Service->constructUrl('JobHistoryList')%>';
+function get_run_job_callback() {
+       return <%=$this->RunJobCb->ActiveControl->Javascript%>;
 }
+function get_cancel_job_callback() {
+       return <%=$this->CancelJobCb->ActiveControl->Javascript%>;
+}
+function show_btn_loader(jobid) {
+       var btns = document.querySelectorAll('button[data-btn-id="' + jobid + '"]');
+       var loader;
+       for (var i = 0; i < btns.length; i++) {
+               loader = document.createElement('IMG');
+               loader.setAttribute('data-loader-id', jobid);
+               loader.src = '<%=$this->getPage()->getTheme()->getBaseUrl()%>/loader-small.gif';
+               loader.style.display = 'none';
+               loader.className = 'btn_loader';
+               btns[i].parentNode.insertBefore(loader, btns[i]);
+               btns[i].style.display = 'none';
+               loader.style.display = '';
+       }
+}
+
+function hide_btn_loader(jobid) {
+       var btns = document.querySelectorAll('button[data-btn-id="' + jobid + '"]');
+       var loaders = document.querySelectorAll('img[data-loader-id="' + jobid + '"]');
+       var loader_list = Array.prototype.slice.call(loaders);
+
+       // Note, there can be more loaders with the same loader-id in small width view.
+       for (var i = (loader_list.length-1); i >= 0; i--) {
+               loader_list[i].parentNode.removeChild(loader_list[i]);
+       }
+
+       for (var i = 0; i < btns.length; i++) {
+               btns[i].style.display = 'inline-block';
+       }
+}
+
 var oJobList = {
        table: null,
        table_toolbar: null,
@@ -162,6 +209,13 @@ var oJobList = {
                                this.table_toolbar.style.display = this.table.rows({selected: true}).data().length > 0 ? '' : 'none';
                        }.bind(this));
                }.bind(this));
+               var el = $('#' + this.ids.job_list);
+               el.on('page.dt', function () {
+                       el.find('img.btn_loader').each(function(idx, el) {
+                               var jobid = el.getAttribute('data-loader-id');
+                               hide_btn_loader(jobid);
+                       });
+               });
        },
        set_table: function() {
                this.table = $('#' + this.ids.job_list).DataTable({
@@ -336,23 +390,25 @@ var oJobList = {
                                                if (['C', 'R'].indexOf(row.jobstatus) === -1) {
                                                        // rerun job button
                                                        btn = document.createElement('BUTTON');
-                                                       btn.className = 'w3-button w3-green';
+                                                       btn.className = 'w3-button w3-tiny w3-green';
                                                        btn.type = 'button';
                                                        i = document.createElement('I');
                                                        btn.title = '<%[ Run job again ]%>';
                                                        i.className = 'fa fa-play';
                                                        btn.appendChild(i);
-                                                       btn.setAttribute('onclick', 'run_job_callback.setCallbackParameter(' + data + '); run_job_callback.dispatch();');
+                                                       btn.setAttribute('data-btn-id', data);
+                                                       btn.setAttribute('onclick', 'var rjc = get_run_job_callback(); rjc.setCallbackParameter(' + data + '); rjc.dispatch();');
                                                } else {
                                                        // cancel job button
                                                        btn = document.createElement('BUTTON');
-                                                       btn.className = 'w3-button w3-green';
+                                                       btn.className = 'w3-button w3-tiny w3-green';
                                                        btn.type = 'button';
                                                        i = document.createElement('I');
                                                        btn.title = '<%[ Cancel job ]%>';
                                                        i.className = 'fa fa-stop';
                                                        btn.appendChild(i);
-                                                       btn.setAttribute('onclick', 'cancel_job_callback.setCallbackParameter(' + data + '); cancel_job_callback.dispatch();');
+                                                       btn.setAttribute('data-btn-id', data);
+                                                       btn.setAttribute('onclick', 'var cjc = get_cancel_job_callback(); cjc.setCallbackParameter(' + data + '); cjc.dispatch();');
                                                }
                                                container.appendChild(btn);
                                                var space = document.createTextNode(' ');
@@ -360,7 +416,7 @@ var oJobList = {
 
                                                // job details button
                                                btn = document.createElement('BUTTON');
-                                               btn.className = 'w3-button w3-green';
+                                               btn.className = 'w3-button w3-tiny w3-green';
                                                btn.type = 'button';
                                                i = document.createElement('I');
                                                i.className = 'fa fa-list-ul';
index 4cb24b4a7eebef0d126ba18b4edcea9e5eb24302..ffd20d02c26b0e82549b7093bd8a0528085d557c 100644 (file)
@@ -78,9 +78,7 @@ class JobHistoryList extends BaculumWebPage {
                        $result = $this->getModule('api')->create(array('jobs', 'run'), $params);
                        if ($result->error === 0) {
                                $started_jobid = $this->getModule('misc')->findJobIdStartedJob($result->output);
-                               if (is_numeric($started_jobid)) {
-                                       $this->getPage()->getCallbackClient()->callClientFunction('refresh_job_history');
-                               } else {
+                               if (!is_numeric($started_jobid)) {
                                        $errmsg = implode('<br />', $result->output);
                                        $this->getPage()->getCallbackClient()->callClientFunction('show_error', array($errmsg, $result->error));
                                }
@@ -96,7 +94,6 @@ class JobHistoryList extends BaculumWebPage {
                        array('jobs', $jobid, 'cancel'),
                        array()
                );
-               $this->getPage()->getCallbackClient()->callClientFunction('refresh_job_history');
        }
 
        /**
index b60d38ae238ff05ddb3bf0f243c3b5bf3472d6a1..7d91ce4c1bb615f35c7f6671673b485f8bf2a532 100644 (file)
                        <b><i class="fa fa-plus"></i> &nbsp;<%[ New ]%> <%=$this->getResourceType()%></b>
                </h5>
        </header>
-       <button type="button" class="w3-button w3-green w3-margin-left w3-margin-bottom" onclick="document.getElementById('new_resource').style.display = 'block'">
-               <i class="fa fa-plus"></i> &nbsp;<%=Prado::localize('Add new resource')%>
-       </button>
-       <div id="resource_save_ok_box" class="w3-modal" style="display: none">
-               <div class="w3-modal-content w3-card-4 w3-animate-zoom" style="width: 600px">
-                       <header class="w3-container w3-green">
-                               <span onclick="$('#resource_save_ok_box').hide();" class="w3-button w3-display-topright">×</span>
-                               <h2><%[ Create new resource ]%></h2>
-                       </header>
-                       <div class="w3-panel w3-padding">
-                               <p><%[ The resource has been created successfully. ]%></p>
+       <div>
+               <button type="button" class="w3-button w3-green w3-margin-left w3-margin-bottom" onclick="document.getElementById('new_resource').style.display = 'block'">
+                       <i class="fa fa-plus"></i> &nbsp;<%=Prado::localize('Add new resource')%>
+               </button>
+               <div id="resource_save_ok_box" class="w3-modal" style="display: none">
+                       <div class="w3-modal-content w3-card-4 w3-animate-zoom" style="width: 600px">
+                               <header class="w3-container w3-green">
+                                       <span onclick="$('#resource_save_ok_box').hide();" class="w3-button w3-display-topright">×</span>
+                                       <h2><%[ Create new resource ]%></h2>
+                               </header>
+                               <div class="w3-panel w3-padding">
+                                       <p><%[ The resource has been created successfully. ]%></p>
+                               </div>
+                               <footer class="w3-container w3-center w3-border-top">
+                                       <button type="button" class="w3-button w3-section w3-green" onclick="$('#resource_save_ok_box').hide(); save_directive_post_action();"><i class="fa fa-check"></i> &nbsp;<%[ OK ]%></button>
+                               </footer>
                        </div>
-                       <footer class="w3-container w3-center w3-border-top">
-                               <button type="button" class="w3-button w3-section w3-green" onclick="$('#resource_save_ok_box').hide(); save_directive_post_action();"><i class="fa fa-check"></i> &nbsp;<%[ OK ]%></button>
-                       </footer>
                </div>
-       </div>
-       <div id="new_resource" class="w3-modal">
-               <div class="w3-modal-content w3-animate-top w3-card-4 w3-padding">
-                       <header class="w3-container"> 
-                               <span onclick="document.getElementById('new_resource').style.display='none'" class="w3-button w3-display-topright">&times;</span>
-                               <h2><%[ Add new resource ]%></h2>
-                       </header>
-                       <div class="w3-row w3-margin">
-                               <div class="w3-third"><%[ Host: ]%></div>
-                               <div class="w3-third">
-                                       <com:TActiveDropDownList
-                                               ID="Host"
-                                               CssClass="w3-select w3-border"
-                                               OnSelectedIndexChanged="setComponents"
-                                       >
-                                               <prop:ClientSide.OnLoading>
-                                                       document.getElementById('component_loader').style.display = '';
-                                               </prop:ClientSide.OnLoading>
-                                               <prop:ClientSide.OnComplete>
-                                                       document.getElementById('component_loader').style.display = 'none';
-                                               </prop:ClientSide.OnComplete>
-                                       </com:TActiveDropDownList>
+               <div id="new_resource" class="w3-modal">
+                       <div class="w3-modal-content w3-animate-top w3-card-4 w3-padding">
+                               <header class="w3-container"> 
+                                       <span onclick="document.getElementById('new_resource').style.display='none'" class="w3-button w3-display-topright">&times;</span>
+                                       <h2><%[ Add new resource ]%></h2>
+                               </header>
+                               <div class="w3-row w3-margin">
+                                       <div class="w3-third"><%[ Host: ]%></div>
+                                       <div class="w3-third">
+                                               <com:TActiveDropDownList
+                                                       ID="Host"
+                                                       CssClass="w3-select w3-border"
+                                                       OnSelectedIndexChanged="setComponents"
+                                               >
+                                                       <prop:ClientSide.OnLoading>
+                                                               document.getElementById('component_loader').style.display = '';
+                                                       </prop:ClientSide.OnLoading>
+                                                       <prop:ClientSide.OnComplete>
+                                                               document.getElementById('component_loader').style.display = 'none';
+                                                       </prop:ClientSide.OnComplete>
+                                               </com:TActiveDropDownList>
+                                       </div>
                                </div>
-                       </div>
-                       <div class="w3-row w3-margin">
-                               <div class="w3-third"><%[ Component: ]%></div>
-                               <div class="w3-third">
-                                       <com:TActiveDropDownList
-                                               ID="Component"
-                                               CssClass="w3-select w3-border"
-                                               OnSelectedIndexChanged="setResource"
-                                       >
-                                               <prop:ClientSide.OnLoading>
-                                                       document.getElementById('resource_loader').style.display = '';
-                                               </prop:ClientSide.OnLoading>
-                                               <prop:ClientSide.OnComplete>
-                                                       document.getElementById('resource_loader').style.display = 'none';
-                                               </prop:ClientSide.OnComplete>
-                                       </com:TActiveDropDownList>
+                               <div class="w3-row w3-margin">
+                                       <div class="w3-third"><%[ Component: ]%></div>
+                                       <div class="w3-third">
+                                               <com:TActiveDropDownList
+                                                       ID="Component"
+                                                       CssClass="w3-select w3-border"
+                                                       OnSelectedIndexChanged="setResource"
+                                               >
+                                                       <prop:ClientSide.OnLoading>
+                                                               document.getElementById('resource_loader').style.display = '';
+                                                       </prop:ClientSide.OnLoading>
+                                                       <prop:ClientSide.OnComplete>
+                                                               document.getElementById('resource_loader').style.display = 'none';
+                                                       </prop:ClientSide.OnComplete>
+                                               </com:TActiveDropDownList>
+                                       </div>
+                                       <i id="component_loader" class="fa fa-sync w3-spin w3-margin-left w3-margin-top" style="display: none"></i>
                                </div>
-                               <i id="component_loader" class="fa fa-sync w3-spin w3-margin-left w3-margin-top" style="display: none"></i>
-                       </div>
-                       <div class="w3-row w3-margin">
-                               <div class="w3-third"><%[ Resource to create: ]%></div>
-                               <div class="w3-third">
-                                       <com:TActiveDropDownList
-                                               ID="Resource"
-                                               CssClass="w3-select w3-border"
-                                       />
-                                       <com:TRequiredFieldValidator
+                               <div class="w3-row w3-margin">
+                                       <div class="w3-third"><%[ Resource to create: ]%></div>
+                                       <div class="w3-third">
+                                               <com:TActiveDropDownList
+                                                       ID="Resource"
+                                                       CssClass="w3-select w3-border"
+                                               />
+                                               <com:TRequiredFieldValidator
+                                                       ValidationGroup="NewResource"
+                                                       Display="Dynamic"
+                                                       ControlToValidate="Resource"
+                                                       FocusOnError="true"
+                                                       Text="<%[ Field required. ]%>"
+                                               />
+                                       </div>
+                                       <i id="resource_loader" class="fa fa-sync w3-spin w3-margin-left w3-margin-top" style="display: none"></i>
+                               </div>
+                               <com:TActiveLabel ID="NewResourceLog" Display="None" CssClass="w3-panel w3-margin w3-text-red" />
+                               <div class="w3-row w3-margin w3-center">
+                                       <com:TLinkButton
+                                               CssClass="w3-button w3-green w3-margin-left"
+                                               OnClick="createResource"
+                                               CausesValidation="true"
                                                ValidationGroup="NewResource"
-                                               Display="Dynamic"
-                                               ControlToValidate="Resource"
-                                               FocusOnError="true"
-                                               Text="<%[ Field required. ]%>"
-                                       />
+                                       >
+                                               <prop:Text>
+                                                       <i class="fa fa-plus"></i> &nbsp;<%=Prado::localize('Create')%>
+                                               </prop:Text>
+                                       </com:TLinkButton>
                                </div>
-                               <i id="resource_loader" class="fa fa-sync w3-spin w3-margin-left w3-margin-top" style="display: none"></i>
-                       </div>
-                       <com:TActiveLabel ID="NewResourceLog" Display="None" CssClass="w3-panel w3-margin w3-text-red" />
-                       <div class="w3-row w3-margin w3-center">
-                               <com:TLinkButton
-                                       CssClass="w3-button w3-green w3-margin-left"
-                                       OnClick="createResource"
-                                       CausesValidation="true"
-                                       ValidationGroup="NewResource"
-                               >
-                                       <prop:Text>
-                                               <i class="fa fa-plus"></i> &nbsp;<%=Prado::localize('Create')%>
-                                       </prop:Text>
-                               </com:TLinkButton>
                        </div>
                </div>
-       </div>
-       <div id="resource_config" class="w3-container">
-               <com:Application.Web.Portlets.BaculaConfigDirectives
-                       ID="NewResource"
-                       SaveDirectiveActionOk="save_directive_action_ok();"
-                       ShowRemoveButton="false"
-                       ShowCancelButton="false"
-               />
-       </div>
-       <script>
-               function save_directive_action_ok() {
-                       $('#resource_config').slideUp();
-                       $('#resource_save_ok_box').show();
-               }
-               function save_directive_post_action() {
-                       var origin_url = '<%=$this->getOriginUrl()%>';
-                       if (origin_url) {
-                               document.location.href = origin_url;
+               <div id="resource_config" class="w3-container">
+                       <com:Application.Web.Portlets.BaculaConfigDirectives
+                               ID="NewResource"
+                               SaveDirectiveActionOk="save_directive_action_ok();"
+                               ShowRemoveButton="false"
+                               ShowCancelButton="false"
+                       />
+               </div>
+               <script>
+                       function save_directive_action_ok() {
+                               $('#resource_config').slideUp();
+                               $('#resource_save_ok_box').show();
+                       }
+                       function save_directive_post_action() {
+                               var origin_url = '<%=$this->getOriginUrl()%>';
+                               if (origin_url) {
+                                       document.location.href = origin_url;
+                               }
                        }
-               }
-               oBaculaConfigSection.show_sections(true);
-       </script>
+                       oBaculaConfigSection.show_sections(true);
+               </script>
+       </div>
 </com:TContent>
index 9e176b140ab2f4c390dec09291db92ca5ca9df9b..e5a89d645ab775cc91fc09d4e1487e91741ecd1f 100644 (file)
@@ -37,7 +37,7 @@
                ItemRenderer="Application.Web.Portlets.DirectiveRenderer"
                >
        </com:TActiveRepeater>
-       <div class="w3-row w3-center w3-border bottom_buttons page_main_el" style="margin-left: 300px">
+       <div class="w3-row w3-center w3-border bottom_buttons page_main_el" style="margin-left: 250px">
                <com:Application.Web.Portlets.DirectiveSetting
                        ID="DirectiveSetting"
                        Resource="<%=$this->getResource()%>"
index 9393060a4646990298650eac8bb75e3fdf3ea38a..a37e2ffe76b4785cdec5e2d4675ec8f01c6a19a4 100644 (file)
@@ -1,10 +1,10 @@
 <!-- Sidebar/menu -->
-<nav class="w3-sidebar w3-white w3-animate-left w3-margin-bottom" style="z-index:3;width:300px;" id="sidebar"><br />
-       <div class="w3-container w3-row">
-               <div class="w3-col s4">
-                       <img src="<%=$this->getPage()->getTheme()->getBaseUrl()%>/avatar2.png" class="w3-circle w3-margin-right" style="width:46px" />
+<nav class="w3-sidebar w3-white w3-animate-left w3-margin-bottom" style="z-index:3;width:250px;" id="sidebar"><br />
+       <div class="w3-container w3-row" style="margin-bottom: 8px">
+               <div class="w3-col s3">
+                       <img src="<%=$this->getPage()->getTheme()->getBaseUrl()%>/avatar2.png" class="w3-circle w3-margin-right" style="width: 33px" />
                </div>
-               <div class="w3-col s8 w3-bar">
+               <div class="w3-col s9 w3-bar">
                        <span><%[ Welcome ]%>, <strong><%=$this->User->getUsername()%></strong></span><br>
                        <script>var main_side_bar_reload_url = '<%=$this->reload_url%>';</script>
                        <com:TActiveLinkButton
@@ -27,7 +27,6 @@
                        <a href="<%=$this->Service->constructUrl('ApplicationSettings')%>" class="w3-bar-item w3-button<%=$this->getModule('users')->isPageAllowed($this->User, 'ApplicationSettings') ? '' : ' hide'%>" title="<%[ Application settings ]%>"><i class="fa fa-cog"></i></a>
                </div>
        </div>
-       <hr />
        <div class="w3-container w3-black">
                <h5>Baculum Menu</h5>
        </div>
index 53dcdcb4d99ae5960f96455afe3bae4b1554769e..9dd44dd40804482b497d0f1b1c3b60e0985be817 100644 (file)
@@ -1,3 +1,8 @@
+#page_main > header {
+       display: inline-block;
+       margin-top: 8px;
+}
+
 #jobs_summary_graph {
        height: 380px;
        z-index: 0;
@@ -19,6 +24,11 @@ pre {
        word-wrap: break-word;       /* Internet Explorer 5.5+ */
 }
 
+table.dataTable {
+       font-size: 14px;
+       line-height: 1.2;
+}
+
 th, table.dataTable thead td {
        border-bottom: none !important;
 }
@@ -63,6 +73,14 @@ table.dataTable.no-footer {
        background-image: linear-gradient(to bottom, white 0%, #e9e9e9 100%);
 }
 
+table.dataTable tbody th, table.dataTable tbody td {
+       padding: 8px 7px;
+}
+
+table.dataTable tfoot th, table.dataTable tfoot td {
+       padding: 10px 0 6px 0 !important;
+}
+
 /* Hide first default column in column visibility menu */
 div.dt-button-collection button[data-cv-idx="0"] {
        display: none;
@@ -72,6 +90,13 @@ table.selectable tr {
        cursor: pointer;
 }
 
+img.btn_loader {
+       display: inline-block;
+       margin: 0 9px 0 10px;
+       width: 22px;
+       height: 22px;
+}
+
 div.table_toolbar {
        display: inline-block;
        margin-left: 10px;
@@ -100,6 +125,7 @@ table.dataTable tbody > tr.selected, table.dataTable tbody > tr > .selected {
 
 th.action_col, td.action_col {
        width: 110px !important;
+       text-align: center;
 }
 
 td.action_col button {
@@ -334,7 +360,7 @@ table.component td:nth-of-type(1) {
        padding: 5px 0;
        min-height: 48px;
        background-color: rgba(255, 255, 255, 0.5);
-       width: calc(100% - 300px);
+       width: calc(100% - 250px);
 }
 
 .bottom_buttons a, .bottom_buttons button {